Javascript 将背景图像添加到SVG
我正在使用Snap.svg并尝试向多边形添加背景图像 多边形如下所示:Javascript 将背景图像添加到SVG,javascript,jquery,css,svg,snap.svg,Javascript,Jquery,Css,Svg,Snap.svg,我正在使用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,
<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);
有什么想法吗?谢谢。你需要做几件事。如果使用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 })
您需要做几件事。如果使用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 })
这是我认为最好的解决方案。它模拟真实背景而不缩小比例。这是我认为最好的解决方案。它模拟真实背景而不缩小比例