[英]SVG path (ellipse) fill with image does not work (except Chrome on MacOS)
創建了一個帶有橢圓的簡單SVG。 我希望該橢圓充滿外部圖像。 在MacOS的Chrome上顯示為OK,但在其他代理上則顯示為OK。 怎么了 ? 在這里搜索了很多其他問題,但似乎沒有幫助。
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="100px" y="100px" viewBox="0 0 177.5 175" xml:space="preserve"> <defs> <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="200" width="200"> <image x="100" y="1000" xlink:href="http://i.imgur.com/7Nlcay7.jpg"></image> </pattern> </defs> <ellipse id="FillThisWithColorOrPattern" style="fill:url(#image)" stroke="#333333" stroke-miterlimit="10" cx="90" cy="87" rx="87.5" ry="82"/> <circle id="Inner_1_" fill="#FF0000" cx="90" cy="87" r="35"/> <path id="TextLine1_Path" fill=None d="M90,137.5c-27.8,0-50.5-22.7-50.5-50.5S62.2,36.5,90,36.5s50.5,22.7,50.5,50.5S117.8,137.5,90,137.5z M90,37.5 c-27.3,0-49.5,22.2-49.5,49.5s22.2,49.5,49.5,49.5c27.3,0,49.5-22.2,49.5-49.5S117.3,37.5,90,37.5z"/> <text> <textPath xlink:href="#TextLine1_Path"> The quick brown fox jumps over the lazy dog. </textPath> </text> </svg>
看來您必須為其他瀏覽器指定圖像的寬度和高度。 我在MacOS上使用Firefox 58和Safari 11進行了嘗試,並且有這種模式。
<image x="0" y="0" xlink:href="http://i.imgur.com/7Nlcay7.jpg" width="200" height="200"/>
這是您更新的示例: https : //codepen.io/anon/pen/RJeMda
另外,請注意,自SVG 2起,不建議使用xlink:href
。您現在應該使用href
。 MDN文檔添加:
對於實現href的瀏覽器,如果同時設置了href和xlink:href,則xlink:href將被忽略,僅使用href。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.