Question

我正在尝试在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示例，但景观没有显示出来。

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

由于

Answer 1

＆＃13;

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

＆＃13;

在SVG圆圈中不显示图像作为图案

1 个答案: