图像作为 svg 路径的背景

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>