时间戳

首页 > 解决方案 > SVG 路径（椭圆）填充图像不起作用（MacOS 上的 Chrome 除外）

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

问题描述

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

密码笔 

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

标签： htmlsvguser-agentfill

解决方案

似乎您必须为其他浏览器的图像指定宽度和高度。我在 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 文档补充说：

对于实现href的浏览器，如果href和xlink:href都设置了，xlink:href会被忽略，只使用href。

推荐阅读