WebkitブラウザでSVGパターン画像が切り取られます

Question

パターン画像を持つピルsvgを作成しました。 FF、IE、Edgeでは完璧に見えますが、ChromeではOpera（ウェブキットブラウザ）の画像が途切れてしまいます。この問題は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に変更してください.VSGではviewBoxに関連する多くの問題に直面しますので、このリンクを確認してください。 https://sarasoueidan.com/blog/svg-coordinate-systems/