web-dev-qa-db-ja.com

タイリングやスケーリングなしでSVGパス要素を背景画像で塗りつぶす

SVGパス要素をbackground-imageで埋める のようにしたいのですが、そこで提供されるソリューションは、画像を並べて背景領域全体を塗りつぶします。それは欲しくない。画像が高さ全体または幅全体を満たさない場合は、パス形状の中央に配置して、それをそのままにします。高さ/幅の属性を変更して動作を制限しようとすると、レンダリングは、少なくとも1つの寸法を満たすまで画像を拡大縮小します。

この動作はパターンを使用しているため、いくぶん理にかなっていると思います。私が欲しいのは、それ自体「パターン」ではないことがわかります。形の真ん中に絵を描いて、型紙を作りたくない。ただし、画像のサイズがこれらの境界を超えている場合は常に、SVGパスで定義された形状の境界が画像のレンダリングを遮断するようにしたいです。その質問への回答で行われているように、fill属性にパターンを使用する以外に、その動作を取得する他の方法はわかりません。

同様の質問： 背景画像（.png）をSVGの円図形に追加 、一番下のユーザーは、パターンではなくフィルターを使用して、私が何をしているかを示しているようです達成しようとしています。しかし、それを試してみると、レンダリング中の実際の形状は考慮されません。画像は形状の境界を考慮せずにレンダリングされますが、ほとんど役に立たないようです。

SVGでパターンのような背景画像の動作を取得する方法はありますか？

htmlimagesvgbackground-image
15
Michael

パターンのx、y、widthおよびheightをパスの境界ボックスに一致させるだけです。 patternUnitsのデフォルトはobjectBoundingBoxであるため、ここではそれぞれ「0」、「0」、「1」、「1」を使用できます。したがって、単位は境界ボックスを基準にして表されます。次に、パターン内の画像に、パスバウンディングボックスのwidthおよびheightも含めます。今回は、「実際の」サイズを使用する必要があります。

<image>のpreserveAspectRatioのデフォルト値は、望みどおりの結果をもたらすため、画像は自動的にパターンの中央に配置されます。

<svg width="600" height="600">
  
  <defs>
      <pattern id="imgpattern" x="0" y="0" width="1" height="1">
        <image width="120" height="250"
               xlink:href="http://lorempixel.com/animals/120/250/"/>
      </pattern>
  </defs>
  
  
  
  <path fill="url(#imgpattern)" stroke="black" stroke-width="4"
        d="M 100,50 L 120,110 150,90 170,220 70,300 50,250 50,200 70,100 50,70 Z" />

</svg>
21
Paul LeBeau