如何使svg模式覆盖svg填充区域

Question

我有一个svg，其路径使用填充模式。 对于图案包含图像。 图案具有适合路径的宽度/高度（长宽比）。 图案中的图像虽然长宽比略有不同 因此无法正确覆盖路径。

SVG：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="2342.017167382" height="2162.017167382" viewBox="-186.00858369099 -186.00858369099 2342.017167382 2162.017167382" preserveAspectRatio="xMidYMid slice">
    <pattern id="pattern" width="1970" height="1790" patternUnits="userSpaceOnUse" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice">
        <image width="1" height="1" xlink:href="image.jpg" />
    </pattern>
    <use xlink:href="#path" overflow="visible" stroke="#000000" stroke-width="93.004291845494"/>
    <path id="path" stroke-miterlimit="10" fill="url(#pattern)" d="m 1432.727 0c -170.136 0 -340.273 80.55 -447.727 205.85c -107.455 -125.3 -268.636 -205.85 -438.773 -205.85c -304.455 0 -546.227 232.7 -546.227 537c 0 366.95 331.318 671.25 841.727 1127.7l 143.273 125.3l 143.273 -125.3c 510.409 -456.45 841.727 -760.75 841.727 -1127.7c 0 -304.3 -241.773 -537 -537.273 -537z"/>
</svg>

结果：

我如何向上/向下拉伸图案中的图像？

Answer 1

一种解决方案是更改样式的x和y的宽度：

svg{width:300px;border:1px solid}

<svg viewBox="-186 -186 2342 2162" preserveAspectRatio="xMidYMid slice">
    <pattern id="pattern" x="-430" y="-430"  width="3000" height="3000" patternUnits="userSpaceOnUse" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice">
        <image width="1" height="1" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/butterfly.jpg" />
    </pattern>
    <use xlink:href="#path" overflow="visible" stroke="#000000" stroke-width="93.004291845494"/>
    <path id="path" stroke-miterlimit="10" fill="url(#pattern)" d="m 1432.727 0c -170.136 0 -340.273 80.55 -447.727 205.85c -107.455 -125.3 -268.636 -205.85 -438.773 -205.85c -304.455 0 -546.227 232.7 -546.227 537c 0 366.95 331.318 671.25 841.727 1127.7l 143.273 125.3l 143.273 -125.3c 510.409 -456.45 841.727 -760.75 841.727 -1127.7c 0 -304.3 -241.773 -537 -537.273 -537z"/>
</svg>

另一种解决方案是使用clip-path

svg{width:300px;border:1px solid}

<svg viewBox="-186 -186 2342 2162" preserveAspectRatio="xMidYMid slice">
  <defs>
    <clipPath id="clip">
      <path id="path" stroke-miterlimit="10" fill="url(#pattern)" d="m 1432.727 0c -170.136 0 -340.273 80.55 -447.727 205.85c -107.455 -125.3 -268.636 -205.85 -438.773 -205.85c -304.455 0 -546.227 232.7 -546.227 537c 0 366.95 331.318 671.25 841.727 1127.7l 143.273 125.3l 143.273 -125.3c 510.409 -456.45 841.727 -760.75 841.727 -1127.7c 0 -304.3 -241.773 -537 -537.273 -537z"/>
    </clipPath>
  </defs>
  <use  xlink:href="#path" stroke="black" stroke-width="93"/>
 <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/butterfly.jpg" x="-10%" y="0" width="120%"  clip-path="url(#clip)"></image>
</svg>

另一个解决方案是使用svg掩码：

svg{width:300px;border:1px solid}

<svg viewBox="-186 -186 2342 2162" preserveAspectRatio="xMidYMid slice">
 <defs>
  <mask id="mask">
   <path id="_path" stroke-miterlimit="10" fill="white" d="m 1432.727 0c -170.136 0 -340.273 80.55 -447.727 205.85c -107.455 -125.3 -268.636 -205.85 -438.773 -205.85c -304.455 0 -546.227 232.7 -546.227 537c 0 366.95 331.318 671.25 841.727 1127.7l 143.273 125.3l 143.273 -125.3c 510.409 -456.45 841.727 -760.75 841.727 -1127.7c 0 -304.3 -241.773 -537 -537.273 -537z"/>
  </mask>
 </defs>
  
<use  xlink:href="#_path" stroke="black" stroke-width="93"/>
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/butterfly.jpg" width="120%" x="-10%" style="mask: url(#mask);"></image>
</svg>