Question

我很难尝试让以下工作：

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

到目前为止，这个例子做得很好：

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13; 尝试抓住调整大小手柄以查看三角形对容器大小变化的反应。

我遗漏了最后一件事，无法弄明白该怎么做：

必须使用光栅图像（png文件）
不得缩放纹理。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

因此问题：

第二个例子的工作归功于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>

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

1 个答案: