在webkit浏览器中切断SVG图案图像

Question

我创建了具有图案图像的pill svg。它在FF，IE，Edge中看起来非常完美，但在Chrome中，Opera（webkit浏览器）图像被切断。这个问题也出现在Safari和Firefox的Mac上。 这里是例子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

只要改变视框为“0 0 300 300”和图像的宽度和高度，以300为好，并在SVG，你会面临很多与视框相关的问题，所以对于更好地了解检查此链接 https://sarasoueidan.com/blog/svg-coordinate-systems/