在webkit浏览器中切断SVG模式图像

Question

我创造了具有图案图像的药片svg。它在FF，IE，Edge中看起来很完美，但在Chrome中，Opera（webkit浏览器）图像被切断了。这个问题也出现在Mac和Safari和Firefox中。 以下是codepen中的示例：http://codepen.io/reinis/pen/wWXdbz

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 240 240"> <defs> <pattern id="imgpattern" x="0" y="0" width="1" height="1"> <image width="240" height="240" xlink:href="http://www.vrheadsets3d.com/wp-content/uploads/2016/07/dreams-of-dali-400x400.jpg"/> </pattern> </defs> <path fill="url(#imgpattern)" d="M17.654,17.654C-5.93,41.238-5.878,79.528,17.77,103.176l59.448,59.448l59.606,59.606c23.648,23.648,61.938,23.7,85.522,0.116s23.532-61.874-0.116-85.522l-59.488-59.488L103.176,17.77 C79.528-5.878,41.238-5.93,17.654,17.654z" /> </svg>

有人可以弄清楚发生了什么吗？

Answer 1

只需将视图框更改为＆＃34; 0 0 300 300＆＃34;并且图像宽度和高度也是300，而在SVG中你将面临很多与viewBox相关的问题，所以为了更好地理解，请查看此链接 https://sarasoueidan.com/blog/svg-coordinate-systems/