Question

我想在SVG多边形中嵌入一个img或div，但是当我尝试它时，好像图像不是嵌套的，也不是多边形的子项。所以基本上我的理由是我想在一个三角形内制作幻灯片。其他想法这样做也会很好:)

svg标签在没有嵌套IMG的情况下工作，所以我认为这不是缺陷所在。我打开了多边形标签并将IMG嵌套在里面。像这样：

<svg>
  <polygon>
    <IMG SRC=""/>
    </polygon>
  </svg>

我知道多边形通常是一个自动关闭的标签，但认为它可能有效

Answer 1

您无法将图片嵌套在polygon标记中。但是，您可以使用此方法使用SVG剪切图像：

＆＃13;

image{
    clip-path:url(#triangle);
}

＆＃13;

<svg width="40%" height="40%" xml:lang="fr" viewBox="0 0 500 432.5" preserveAspectRatio="xMidYMid meet" 
xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
    <clipPath id="triangle">
        <polygon points="0.4,432.5 250.1,0 499.8,432.5 "/>
    </clipPath>
</defs>
    <image xlink:href="https://dq1eylutsoz4u.cloudfront.net/2014/10/sf-cat.jpg" width="500" height="300"/>
</svg>

＆＃13;

是否可以在svg多边形中嵌套img或div

1 个答案: