12

keith-woodのjQuerySVGプラグインを使用してSVGrectを作成しました。コードは次のとおりです。

svg.graph._wrapper.rect(group, 0, 100, 40, 20,
                       {fill: 'ivory',
                        stroke: 'black',
                        strokeWidth : 2});

そのため、「アイボリー」を使用する代わりに塗りつぶしを簡単に変更できると思い、「theImageIwantToUse」に変更しました。しかし、それは機能していないようです。

4

2 に答える 2

13

外部画像を SVG オブジェクトの背景として直接挿入することはできません。

代わりに、最初にこのようなパターンを作成する必要があります

var ptn = svg.pattern(defs, "imgPattern", 0, 0, 100, 100, 0, 0, 10, 10, 
                      {patternUnits: "userSpaceOnUse"});
svg.image( ptn, 100, 50, 200, 200, "./theImageIwantToUse.png");

url()このパターンを使用してから、fill 属性の関数を介して

svg.graph._wrapper.rect(group, 0, 100, 40, 20,
                       {fill: 'url(#imgPattern)',
                        stroke: 'black',
                        strokeWidth : 2});
于 2012-05-24T12:04:46.360 に答える
11

<image>要素http://www.w3.org/TR/SVG/struct.html#ImageElementを使用して、svg に画像を挿入できます。

あなたが言及したプラグインで適切な機能が利用可能です。

svg.image(parent, x, y, width, height, ref, settings)

( http://keith-wood.name/svg.html )

画像でストロークを使用することはできないので、画像を描画した後に塗りつぶしなしで四角形を描画して、必要な正確な結果を得る必要があります。

于 2012-05-24T12:12:39.243 に答える