小编Har*_*tri的帖子

我想创建一个CSS类来填充带有图像的路径,该路径可以应用于任何SVG路径并用图像填充该路径.必须拉伸图像才能适合该路径.

为达到这个; 我用图像标签创建一个图案,并将宽度和高度设置为100%.但图像占整个屏幕的 100%而不是容器的objectBoundingBox(在本例中为svg标签).

以下是示例代码:

.myClass {
  fill: url(#image);
  stroke: red;
  stroke-width: 5;
}

<svg id='pattern' xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <pattern id='image' x=0 y=0 width="100%" height="100%" patternUnits='objectBoundingBox'>
      <image xlink:href='myImage.png' x=0 y=0 width="100%" height="100%" preserveAspectRatio="none"></image>
    </pattern>
  </defs>
</svg>
<svg id='triangle' xmlns="http://www.w3.org/2000/svg" version="1.1" width='300px' height='300px'>
    <path d='M0 0 L300 0 L300 300 Z' class='myClass'></path>
</svg>

可能是我做错了什么.

请为此问题建议任何解决方案.