在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/