Mais conteúdo relacionado
Semelhante a RaphaëlJS magic (20)
Mais de Kseniya Redunova (6)
RaphaëlJS magic
- 4. SVG Canvas
Does all the job Complete control
DOM elements Lots of work
Vector graphics Pixel perfect
- 5. Scalable Vector Graphics
SVG
XML
DOM elements
JS events
for IE6 – 8
VML “VML пока поддерживается лишь
немногими программами, среди
которых Internet Explorer 5.0+ и
Microsoft Office 2000+” © Wikipedia
Google Maps использует VML для
визуализации векторов на IE
- 6. Firefox -SVG
<div id="mypaper" class="paper">
<svg height="302" version="1.1" width="302"
xmlns="http://www.w3.org/2000/svg"
style="overflow: hidden; position: relative; left: -
0.5px;">
<desc>Created with Raphaël 2.1.0</desc>
<defs/>
<circle cx="150" cy="150" r="50" fill="#ff0000"
stroke="#ffffff" style="" stroke-width="3"/>
</svg>
</div>
- 7. <div class="paper" id="mypaper"> IE8 - VML
<div style="left: 0px; top: 0px; width: 302px; height: 302px; overflow: hidden; display:
inline-block; position: relative; cliptop: 0px; clipright: 302px; clipbottom: 302px; clipleft: 0px;">
<span style="left: -9999em; top: -9999em; line-height: 1; padding-top: 0px; padding-
right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom:
0px; margin-left: 0px; position: absolute; ">
</span>
<shape class="rvml" style="left: 0px; top: 0px; width: 1px; height: 1px;
position: absolute;" raphael="true" raphaelid="0">
<stroke class="rvml"></stroke>
<skew class="rvml"></skew>
<fill class="rvml"></fill>
</shape>
</div>
</div>
- 10. SVG paths
"M 250 250 l 0 -50
l -50 0l 0 -50 l -50 0
l 0 50 l -50 0 l 0 50 z"
- 12. SVG icons
http://raphaeljs.com/icons/
M1,1v30h30V1H1zM17.326,24.398c0,2.92-1.712,4.248-
4.209,4.248c-2.255,0-3.564-1.168-4.229-
2.576l0,0l0,0l0,0l2.296-
1.391c0.443,0.777,0.846,1.442,1.812,1.442c0.926,0,1.511-
0.354,1.511-1.771V14.77h2.819V24.398zM23.992,28.646c-
2.618,0-4.311-1.248-5.135-2.879l2.295-
1.328c0.604,0.979,1.39,1.711,2.779,1.711c1.168,0,1.904-
0.584,1.904-1.396c0-0.966-0.766-1.311-2.054-
1.865L23.08,22.58c-2.034-0.865-3.383-1.953-3.383-
4.249c0-2.114,1.604-3.726,4.128-
3.726c1.792,0,3.081,0.625,4.008,2.254l-2.19,1.406c-0.479-
0.861-1.006-1.209-1.812-1.209c-0.825,0-1.353,0.521-
1.353,1.209c0,0.852,0.521,1.188,1.729,1.711l0.704,0.309c2.
396,1.021,3.746,2.07,3.746,4.43C28.664,27.259,26.671,28.6
46,23.992,28.646z
Leaf icon demo
- 13. Transformation
"t100,100r30,100,100s2,2,100,100r45s1.5"
// translate 100, 100, rotate 45
el.transform("t100,100r45");
Paper.set() var st = paper.set();
st.push(
paper.circle(10, 10, 5),
paper.circle(30, 10, 5)
);
st.attr({fill: "red"});
- 17. Convert any SVG to
Raphael object
SVG to Raphael Converter
Demo - cat
Cats morphing