Question

我有一个普通的矩形位图，我希望能够用它来填充一个四向SVG路径 - 基本上是一个映射的纹理，这样位图的四个角就会映射到路径的四个点和其余的图像被扭曲了＃39;相应

我已经能够使用相同的图像填充SVG矩形，然后转换矩形，以便用它转换位图：

<defs>
  <pattern id="bmp" x="0" y="0" width="1" height="1">
    <image x="0" y="0" width="100" height="100" href="mybmp.bmp"/>
  </pattern>
</defs>
<rect x="0" y="0" width="100" height="100" fill="url(#bmp)" stroke="black" transform="skewX(10)"/>

当我尝试使用位图来填充路径，虽然它被映射到路径形状的边界框而不是路径本身的四个点：

<defs>
  <pattern id="bmp" x="0" y="0" width="1" height="1">
    <image x="0" y="0" width="100" height="100" href="mybmp.bmp"/>
  </pattern>
</defs>
<path d="M 0 0 L 100 0 L 120 80 L 50 120 Z" fill="url(#bmp)" stroke="black" />

是否可以在任意路径形状中获得与第一个示例（纹理正确映射到矩形的所有角落）相同的效果？

Answer 1

一种解决方案是为您的模式提供viewBox，以便缩放其内容图像以适应模式边界。

＆＃13;

<svg>
  <defs>
    <pattern id="bmp" x="0" y="0" width="1" height="1"
             viewBox="0 0 100 100">
      <image x="0" y="0" width="100" height="100" xlink:href="http://www.placekitten.com/100/100"/>
    </pattern>
  </defs>
  <path d="M 0 0 L 100 0 L 120 80 L 50 120 Z" fill="url(#bmp)" stroke="black" />
</svg>

＆＃13;

根据路径的形状，您可能还需要设置preserveAspectRatio="xMidYMid slice"。这将确保图案缩放到足够大的尺寸，以覆盖整个路径而没有间隙。

＆＃13;

<svg>
  <defs>
    <pattern id="bmp" x="0" y="0" width="1" height="1"
             viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
      <image x="0" y="0" width="100" height="100" xlink:href="http://www.placekitten.com/100/100"/>
    </pattern>
  </defs>
  <path d="M 0 0 L 100 0 L 120 80 L 50 120 Z" fill="url(#bmp)" stroke="black" />
</svg>

＆＃13;

纹理映射位图到SVG路径

1 个答案: