Question

我在处理以图像为背景的svg路径时遇到问题。无论如何，无论如何，图像都无法填充路径。任何帮助将不胜感激！

<svg
    width="300"
    height="300"
    viewBox="200 110 160 320"
    xmlns="http://www.w3.org/2000/svg"
    >
    <defs>
        <pattern id="profile" patternUnits="userSpaceOnUse" width="400" height="400">
            <image xlinkHref="img.jpg" x="0" y="0" width="400" height="400" />
        </pattern>
    </defs>
    <g transform='translate(300,300)'>
        <path d="M102.1,-53.2C114.1,3.9,93.2,51.7,58.4,76C23.5,100.3,-25.3,101.1,-72.4,73.2C-119.4,45.2,-164.8,-11.5,-152.5,-69C-140.1,-126.5,-70.1,-184.8,-12.5,-180.7C45,-176.6,90,-110.3,102.1,-53.2Z" fill="url(#profile)" />
    </g>
</svg>

Answer 1

您可以使用路径来裁剪图像，而不是使用图案来填充图像，如下所示：

<svg width="300" height="300" viewBox="200 110 160 320" xmlns="http://www.w3.org/2000/svg">
<defs>
  <clipPath id="cp">
    <path transform='translate(300,300)' d="M102.1,-53.2C114.1,3.9,93.2,51.7,58.4,76C23.5,100.3,-25.3,101.1,-72.4,73.2C-119.4,45.2,-164.8,-11.5,-152.5,-69C-140.1,-126.5,-70.1,-184.8,-12.5,-180.7C45,-176.6,90,-110.3,102.1,-53.2Z" />
  </clipPath>
  </defs>
  <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" x="0" y="0" width="400" height="400" clip-path="url(#cp)" />
</svg>

图像作为svg路径的背景

1 个答案: