8

任意の SVG パスに適用できる画像でパスを塗りつぶし、そのパスを画像で塗りつぶす CSS クラスを作成したいと考えています。そのパスに合わせて画像を引き伸ばす必要があります。

これを達成するには; イメージタグでパターンを作成し、幅と高さを100%に設定します。ただし、イメージは、コンテナー (この場合はsvgタグ)のobjectBoundingBoxではなく、画面全体の 100% を占めます。

以下はサンプルコードです。

.myClass {
  fill: url(#image);
  stroke: red;
  stroke-width: 5;
}

<svg id='pattern' xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <pattern id='image' x=0 y=0 width="100%" height="100%" patternUnits='objectBoundingBox'>
      <image xlink:href='myImage.png' x=0 y=0 width="100%" height="100%" preserveAspectRatio="none"></image>
    </pattern>
  </defs>
</svg>
<svg id='triangle' xmlns="http://www.w3.org/2000/svg" version="1.1" width='300px' height='300px'>
    <path d='M0 0 L300 0 L300 300 Z' class='myClass'></path>
</svg>

私は何か間違ったことをしているのかもしれません。

この問題の解決策を提案してください。

4

1 に答える 1

11

これがあなたの仕事です - http://jsfiddle.net/eAfTc/

.myClass {
  fill: url(#image);
  stroke: red;
  stroke-width: 5;
}

<svg id='pattern' xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <pattern id='image' width="1" height="1" viewBox="0 0 100 100" preserveAspectRatio="none">
      <image xlink:href='http://dummyimage.com/600x400/abc/333' width="100" height="100" preserveAspectRatio="none"></image>
    </pattern>
  </defs>
</svg>
<svg id='triangle' xmlns="http://www.w3.org/2000/svg" version="1.1" width='300px' height='300px'>
    <path d='M0 0 L300 0 L300 300 Z' class='myClass'></path>
</svg>

patternContentUnitsと patternUnits があり、異なることを行うことに注意してください。個人的には、座標系を定義するために viewBox を使用することを好みます。

これは、さまざまなサイズと縦横比のさまざまな要素に適用されたパターンを示す新しい例です。最初の svg フラグメントも削除されます。

更新: <pattern> 要素に「preserveAspectRatio」を追加し、ストレッチとスケーリングを示す新しい例を追加しました。

于 2012-12-17T14:12:19.707 に答える