将背景图像添加到 SVG

Question

我正在使用 Snap.svg 并尝试将背景图像添加到多边形。

多边形如下：

<svg id="test" height="600" width="600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="" class=""></svg>

var polygon = s.polyline(200, 286, 250, 200, 350, 200, 400, 286, 350, 373, 250, 373);

我尝试了很多不同的方法来制作背景图片，但其中 none 行得通：

polygon.attr(
{
    fill: 'url(http://csshexagon.com/img/meow.jpg)'
});


polygon.attr('xlink:href', 'url(http://csshexagon.com/img/meow.jpg)');

有什么想法吗？谢谢

Answer 1

您需要做几件事。如果使用 Snap，请确保您使用的是最新版本，以便 'toPattern()' 有效。

然后我们可以绘制图像，将其转换为图案，然后用图案填充多边形。

var polygon = paper.polyline(200, 286, 250, 200, 350, 200, 400, 286, 350, 373, 250, 373);
var img = paper.image('https://i.imgur.com/LQIsf.jpg', 150, 200, 250, 250)
var p = img.toPattern( 0,0,400,400 );
polygon.attr({ fill: p })

jsfiddle

将背景图像添加到 SVG

Add a background image to an SVG

javascript

css

jquery

svg

snap.svg