Dive Into SVG
- 13. selector {
-webkit-transform : rotate(45deg);
-moz-transform : rotate(45deg);
-ms-transform : rotate(45deg);
-o-transform : rotate(45deg);
transform : rotate(45deg);
}
2011 8 21
- 37. path:hover{
fill-opacity:0.5;
}
@media(max-width:400px){
path{
fill:#36f;
stroke:#000;
stroke-width:6;
}
}
2011 8 21
- 38. path:hover{
fill-opacity:0.5;
}
@media(max-width:400px){
path{
fill:#36f;
stroke:#000;
stroke-width:6;
}
}
2011 8 21
- 39. path:hover{
fill-opacity:0.5;
}
@media(max-width:400px){
path{
fill:#36f;
stroke:#000;
stroke-width:6;
}
}
2011 8 21
- 69. <filter id="DropShadow">
<feGaussianBlur in="sourceAlpha" stdDeviation="5" result="blur"/>
<feOffet in="blur" dx="5" dy="5" result="offetBlur"/>
<feMerge>
<feMergeNode in="offsetBlur"/>
<feMergeNode in="sourceGraphic"/>
</feMerge>
</filter>
2011 8 21
- 70. <filter id="DropShadow">
<feGaussianBlur in="sourceAlpha" stdDeviation="5" result="blur"/>
<feOffet in="blur" dx="5" dy="5" result="offetBlur"/>
<feMerge>
<feMergeNode in="offsetBlur"/>
<feMergeNode in="sourceGraphic"/>
</feMerge>
</filter>
2011 8 21
- 71. <filter id="DropShadow">
<feGaussianBlur in="sourceAlpha" stdDeviation="5" result="blur"/>
<feOffet in="blur" dx="5" dy="5" result="offetBlur"/>
<feMerge>
<feMergeNode in="offsetBlur"/>
<feMergeNode in="sourceGraphic"/>
</feMerge>
</filter>
2011 8 21
- 72. <filter id="DropShadow">
<feGaussianBlur in="sourceAlpha" stdDeviation="5" result="blur"/>
<feOffet in="blur" dx="5" dy="5" result="offetBlur"/>
<feMerge>
<feMergeNode in="offsetBlur"/>
<feMergeNode in="sourceGraphic"/>
</feMerge>
</filter>
2011 8 21
- 73. <filter id="DropShadow">
<feGaussianBlur in="sourceAlpha" stdDeviation="5" result="blur"/>
<feOffet in="blur" dx="5" dy="5" result="offetBlur"/>
<feMerge>
<feMergeNode in="offsetBlur"/>
<feMergeNode in="sourceGraphic"/>
</feMerge>
</filter>
2011 8 21
- 74. <filter id="DropShadow">
<feGaussianBlur in="sourceAlpha" stdDeviation="5" result="blur"/>
<feOffet in="blur" dx="5" dy="5" result="offetBlur"/>
<feMerge>
<feMergeNode in="offsetBlur"/>
<feMergeNode in="sourceGraphic"/>
</feMerge>
</filter>
2011 8 21
- 75. <filter id="DropShadow">
<feGaussianBlur in="sourceAlpha" stdDeviation="5" result="blur"/>
<feOffet in="blur" dx="5" dy="5" result="offetBlur"/>
<feMerge>
<feMergeNode in="offsetBlur"/>
<feMergeNode in="sourceGraphic"/>
</feMerge>
</filter>
2011 8 21
- 81. <rect width="100" height="100" fill="#0099FF">
<animateMotion dur="3s" rotate="auto">
<mpath xlink:href="#guide"/>
</animateMotion>
</rect>
<path id="guide" d="..."/>
2011 8 21
- 82. <rect width="100" height="100" fill="#0099FF">
<animateMotion dur="3s" rotate="auto">
<mpath xlink:href="#guide"/>
</animateMotion>
</rect>
<path id="guide" d="..."/>
2011 8 21
- 83. <rect width="100" height="100" fill="#0099FF">
<animateMotion dur="3s" rotate="auto">
<mpath xlink:href="#guide"/>
</animateMotion>
</rect>
<path id="guide" d="..."/>
2011 8 21
- 84. <rect width="100" height="100" fill="#0099FF">
<animateMotion dur="3s" rotate="auto">
<mpath xlink:href="#guide"/>
</animateMotion>
</rect>
<path id="guide" d="..."/>
2011 8 21
- 85. <rect width="100" height="100" fill="#0099FF">
<animateMotion dur="3s" rotate="auto">
<mpath xlink:href="#guide"/>
</animateMotion>
</rect>
<path id="guide" d="..."/>
2011 8 21
- 86. <rect width="100" height="100" fill="#0099FF">
<animateMotion dur="3s" rotate="auto">
<mpath xlink:href="#guide"/>
</animateMotion>
</rect>
<path id="guide" d="..."/>
2011 8 21
- 90. <svg xmlns="http://www.w3.org/2000/svg">
<g id="sample" ...>
<path d="..."/>
</g>
<script type="application/ecmascript">
document.querySelector("#sample").addEventListener("click",
function(){
this.setAttribute("fill","red");
alert("Clicked !!");
}, false);
</script>
</svg>
2011 8 21
- 95. <body>
<h1>img </h1>
<img src="image.svg" alt="">
</body>
2011 8 21
- 96. <body>
<h1>img </h1>
<img src="image.svg" alt="">
</body>
2011 8 21
- 98. <body>
<h1>img </h1>
<svg width="300" height="300">
<path d="..." />
<path d="..." />
<path d="..." />
</svg>
</body>
2011 8 21
- 99. <body>
<h1>img </h1>
<svg width="300" height="300">
<path d="..." />
<path d="..." />
<path d="..." />
</svg>
</body>
2011 8 21