如何使 svg 图案覆盖 svg 填充区域答案

【问题标题】：How to make a svg pattern cover the svg fill area如何使 svg 图案覆盖 svg 填充区域
【发布时间】：2019-01-16 11:22:46
【问题描述】：

我有一个 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>

结果：

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

【问题讨论】：

将 preserveAspectRatio 更改为“none”

标签： svg

【解决方案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>

【讨论】：