web-dev-qa-db-ja.com

背景画像（.png）をSVG円形に追加する

これは可能ですか？以下は私が試したものですが、円を完全に黒で塗りつぶします。

<svg id='vizMenu' width="700" height="660">
    <defs>
        <filter id="dropshadow" height="130%">
            <feGaussianBlur in="SourceAlpha" stdDeviation="2"/> 
            <feOffset dx="0.5" dy="0.8" result="offsetblur"/> 
            <feMerge>
                <feMergeNode/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
        </filter>
    </defs>
    <circle id='top' filter="url(#dropshadow)" cx="180" cy="120" r="80" stroke="#2E2E2E" stroke-width="2" fill="url('images/Word-cloud.png')"/>
    <circle id='bottom' filter="url(#dropshadow)" cx="500" cy="300" r="80" stroke="#2E2E2E" stroke-width="2" fill="url('images/Word-cloud.png')"/>
    <circle id='extra' filter="url(#dropshadow)" cx="180" cy="560" r="80" stroke="#2E2E2E" stroke-width="2" fill="#ffffff"/>
</svg>
htmlcsssvg
42
Tejen Shrestha

Svg要素の画像塗りつぶしは、 SVGパターン ...

<svg width="700" height="660">
  <defs>
    <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="1" width="1">
      <image x="0" y="0" xlink:href="url.png"></image>
    </pattern>
  </defs>
  <circle id='top' cx="180" cy="120" r="80" fill="url(#image)"/>
</svg>
37
methodofaction

まあ、私は受け入れられた答えでそれを動作させることができませんでした。これは私がそれをやった方法です：

<svg width="100" height="100">
  <defs>
    <pattern id="image" patternUnits="userSpaceOnUse" height="100" width="100">
      <image x="0" y="0" height="100" width="100" xlink:href="http://i.imgur.com/7Nlcay7.jpg"></image>
    </pattern>
  </defs>
  <circle id='top' cx="50" cy="50" r="50" fill="url(#image)"/>
</svg>

サイズをカスタマイズする場合は、これをスケールの参照として使用します。

x = yourPreferredSize

<svg width=">2x" height=">2x">
  <defs>
    <pattern id="image" patternUnits="userSpaceOnUse" height=">2x" width=">2x">
      <image x="0" y="0" height="2x" width="2x" xlink:href="http://i.imgur.com/7Nlcay7.jpg"></image>
    </pattern>
  </defs>
  <circle id='top' cx="x" cy="x" r="x" fill="url(#image)"/>
</svg>

（このスケールは、正方形の画像で機能します）

24
Teo Inke

これは古い質問ですが、画像をオーバーレイするためにフィルターを使用しました。上記の解決策はスケーリングのために私にとってはうまくいきませんでした、そしてそれは画像がタイル張りされているように見えました。代わりにこれを使用しました。他の人にも役立つことを願っています。

<svg width="700" height="660">
    <filter id="this_image" x="0%" y="0%" width="100%" height="100%">
        <feImage xlink:href="test_image.png"/>
    </filter>
    <circle filter="url(#this_image)" cx="180" cy="120" r="80" />
</svg>
13
Arian Faurtosh

適切な説明で解決された画像の繰り返しの問題 （AmeliaBRのおかげで）

TL; DR：objectBoundingBoxとpreserveAspectRatioの概念が使用されています！

<svg height = "10%" width = "10%">
  <defs>
    <pattern id = "attachedImage" height = "100%" width = "100%"            
                   patternContentUnits = "objectBoundingBox">
       <image xlink:href = "url.png" preserveAspectRatio = "none" 
              width = "1" height = "1"/>
    </pattern>
  </defs>
<circle cx = "50%" cy = "50%" r = "35%" fill = "url(#attachedImage)"/>
</svg>
8
Photon Khan

これが私の解決策です。違いは、これはpatternUnits="userSpaceOnUse"を使用しないことと、イメージ要素の目的の幅と高さを指定することです。

<defs>
    <pattern id="{some name}" x="0" y="0" width="1" height="1">
        <image href="{image url}" x="0" y="0" width="{desired width}" height="{desired height}"></image>
    </pattern>
</defs>
1
Lukeus_Maximus