A Pen by Saomocari.

clip-path-使ってみた.markdown

clip-path 使ってみた

A Pen by Saomocari on CodePen.

License.

index.html

<svg width="500" height="375">
  <defs>
    <clipPath id="text_clip">
      <text x="50" y="70" dy="50">（Ｕ＾ω＾ 三 Ｕ＾ω＾）</text>
      <circle cx="120" cy="270" r="100"/>
    </clipPath>
  </defs>
  <image x="0" y="0" width="500" height="375"
         xlink:href="http://memocarilog.info/memocarilog-demo/IMG_2168.JPG" clip-path="url(#text_clip)" />
</svg>

style.css

#text_clip text{
  font-size: 30px;
  font-weight:bold;
}