在缩放的 svg 中使用光栅图像作为平铺背景

Question

我一直试图让以下工作：

• 嵌入的 svg 图片，在 html5 文档中。
• 它有一个多边形（三角形），占据所有 svg 视口：◤
• 这应该延伸到其容器的整个高度。

到目前为止一切都很好，这个例子可以完成这项工作：

#container {
  position: relative;
  width: 5em; height: 5em;
  resize: both; overflow: hidden; // so we can play with it in demo
}

#triangle {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  fill: #00f;
  pointer-events: none;           // so we can grab the resize handle
}

<div id="container">
  <svg id="triangle" viewBox="0 0 10 10" preserveAspectRatio="none">
    <polygon points="0,0 0,10 10,0" />
  </svg>
</div>

尝试抓住调整大小手柄，看看三角形如何对容器大小的变化做出反应。

最后一件事我错过了，不知道该怎么做：

• 必须使用光栅图像（png 文件）对三角形进行纹理化
• 不得缩放该纹理。

到目前为止，我最好的尝试是使用初始坐标系（无 viewPort 指令）将过滤器应用于正方形，如下所示：

#container {
  position: relative;
  width: 5em; height: 5em;
  resize: both; overflow: hidden; // so we can play with it in demo
}
#triangle {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;           // so we can grab the resize handle
}

<div id="container">
  <svg id="triangle" preserveAspectRatio="none">
    <defs>
      <filter id="Tiled">
        <feImage xlink:href="https://www.w3.org/TR/SVG/images/filters/smiley.png"
                 x="0" y="0" width="100" height="100" result="texture"/>
        <feTile in="texture" x="0" y="0" width="100%" height="100%"/>
      </filter>
    </defs>

    <rect filter="url(#Tiled)" x="0" y="0" width="100%" height="100%"/>
  </svg>
</div>

再次尝试使用右下角的（不可见）手柄调整图像大小：背景纹理被平铺。

因此问题：

感谢width="100%"，第二个示例有效。但是，多边形不接受百分比坐标。

→ 如何实现第二个示例的平铺行为，但是像第一个示例一样在动态大小的多边形上？

Answer 1

你只需要一个多边形来剪裁矩形以获得你想要的效果，不是吗？

#container {
  position: relative;
  width: 5em; height: 5em;
  resize: both; overflow: hidden; // so we can play with it in demo
}
#triangle {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;           // so we can grab the resize handle
}

<div id="container">
  <svg id="triangle" preserveAspectRatio="none">
    <defs>
      <filter id="Tiled">
        <feImage xlink:href="https://www.w3.org/TR/SVG/images/filters/smiley.png"
                 x="0" y="0" width="100" height="100" result="texture"/>
        <feTile in="texture" x="0" y="0" width="100%" height="100%"/>
      </filter>
      <clipPath id="clip" clipPathUnits="objectBoundingBox">
          <polygon points="0,0 0,1 1,0" />
      </clipPath>
    </defs>

    <rect clip-path="url(#clip)" filter="url(#Tiled)" x="0" y="0" width="100%" height="100%"/>
  </svg>
</div>