在 SVG 圆圈中没有将图像显示为图案答案

【问题标题】：No display of image as a pattern in SVG circle在 SVG 圆圈中没有将图像显示为图案
【发布时间】：2016-01-10 22:10:16
【问题描述】：

我正在尝试在 html 页面的上下文中以 svg 圆圈显示图像，其中包含以下几行：

<html>
  <head>
  </head>
  <body>
    <svg width="260" height="120">
        <defs>
            <pattern id="Triangle" 
                     width="10" height="10"
                     patternUnits="userSpaceOnUse">
                     <polygon points="5,0 10,10 0,10"/>
            </pattern>
            <pattern id=Img"
                     width="100" height="100"
                     patternUnits="userSpaceOnUse">
                     <image x="0" y="0"
                            width="100%" height="100%"
                            xlink:href="corruscant.jpg"></image>
            </pattern>
        </defs>

        <circle cx="60" cy="60" r="60"
                fill="url(#Img)"
                stroke="red"/>
        <circle cx="200" cy="60" r="60"
                fill="url(#Triangle)"
                stroke="red"/>
    </svg>
  </body>
</html>

根据我在许多文档/示例/帖子中阅读的内容，这“应该”起作用，例如：

但事实并非如此。三角形出现在第二个圆圈中，所以我猜 svg 结构没问题..

我尝试复制/粘贴 jsfiddle 示例，但风景没有显示出来。

我正在寻找我的幼稚方法没有考虑到的元素。

谢谢

【问题讨论】：

这里有语法错误<pattern id=Img"
好吧...我的错...实际上复制/粘贴的 jsfiddle 示例不起作用，因为我在代理后面...
在我的情况下，而不是 fill="url(/#Img)" 使用 fill="url(#Img)"

标签： html svg

【解决方案1】：

<svg width="260" height="120">
  <defs>
    <pattern id="Triangle" width="10" height="10" patternUnits="userSpaceOnUse">
      <polygon points="5,0 10,10 0,10" />
    </pattern>
    <pattern id="Img" width="100" height="100" patternUnits="userSpaceOnUse">
      <image x="0" y="0" width="100%" height="100%" xlink:href="https://upload.wikimedia.org/wikipedia/commons/4/46/A_Meat_Stall_with_the_Holy_Family_Giving_Alms_-_Pieter_Aertsen_-_Google_Cultural_Institute.jpg"></image>
    </pattern>
  </defs>

  <circle cx="60" cy="60" r="60" fill="url(#Img)" stroke="red" />
  <circle cx="200" cy="60" r="60" fill="url(#Triangle)" stroke="red" />
</svg>

【讨论】：