mask sample

svgでmask

これは、面白いかも。
動かし方でプリローダーとかも作れる。

スクリーンショット 2015-10-24 15.23.14

 <div xmlns="http://www.w3.org/1999/xhtml">
 <svg height="500" version="1.1" width="500" xmlns="http://www.w3.org/2000/svg">
 <desc>Created with Snap</desc>
 <defs>
 <mask id="maskSample">
 <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="sample_img.png" preserveAspectRatio="none" x="0" y="0" width="500" height="500"/>
 </mask>
 </defs>
 <circle cx="250" cy="250" r="200" fill="#ffa500" stroke="#000000" mask="url('#maskSample')" style="stroke-width: 20px;"/>
 </svg>

</div>

関連記事