用图像填充的 SVG 路径（椭圆）不起作用（MacOS 上的 Chrome 除外）

Question

创建了一个带有椭圆的简单 SVG。我想让那个椭圆充满外部图像。它在 MacOS 上的 Chrome 上显示正常，但在其他代理上没有显示。怎么了？在这里搜索了很多其他问题，但 none 似乎很有帮助。

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

Answer 1

看来您必须为其他浏览器指定图像的宽度和高度。我在 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

另外，请注意 xlink:href 自 SVG 2 以来已弃用。您现在应该使用 href。 MDN doc 添加：

For browsers implementing href, if both href and xlink:href are set, xlink:href will be ignored and only href will be used.

用图像填充的 SVG 路径（椭圆）不起作用（MacOS 上的 Chrome 除外）

SVG path (ellipse) fill with image does not work (except Chrome on MacOS)

html

svg

user-agent

fill