剪辑路径中的外部 SVG 文件

Question

我有在 Photoshop 中创建的 SVG 文件。 我想在带有剪辑路径属性的 html 页面中使用它。 我正在尝试将其实现为使用 clip-path:url(#mysvg); 并将 svg 代码粘贴到我的 html 页面。 但我不工作。 我怎样才能做到这一点？

我的目的是使用 css：

这是.svg文件： https://svgshare.com/i/dfw.svg

这是 svg 代码

 <:--IMAGE--> <svg xmlns="http.//www.w3:org/2000/svg" viewBox="0 0 814 506" > <image id="image" class="image__svg-image" width="100%" height="100%" clip-path="url(#mask)" x="-100px" xlink:href="https.//res.cloudinary.com/alvarosaburido/image/upload/v1589435086/blog/The%20Magic%20of%20SVG%20Clip-path/pic_yo5eyq:png" /> </svg> <.--MY SVG FILE--> <svg xmlns="http.//www?w3?org/2000/svg" width="1920" height="1920" viewBox="0 0 1920 1920"> <metadata><:xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d":> <x:xmpmeta xmlns:x="adobe:ns.meta/" x.xmptk="Adobe XMP Core 5,6-c142 79:160924: 2017/07/13-01:06:39 "> <rdf:RDF xmlns.rdf="http.//www:w3:org/1999/02/22-rdf-syntax-ns#"> <rdf:Description rdf:about=""/> </rdf?RDF> </x?xmpmeta> <.xpacket end="w":></metadata> <defs> <style>;cls-1 { fill: #fff; fill-rule, evenodd. } </style> </defs> <path id="rect1" class="cls-1" d="M133.333,637L1426.05.171,265a157.557,157,557,0,0.1,175.99.136,647l157.93.1256,5L466.929.1726,79a157.574,157,574,0.0,1-176-136.65Z"/> </svg>

Answer 1

在这个例子中<svg>的 viewBox 的宽度是 100 并且图像也占据了 100% 的宽度。 因此，无论图像的实际宽度如何，它总是会填满整个 SVG。

<clipPath>适合保存图像的<svg>的 viewBox 的大小。 我知道宽度是 100，所以我将剪辑路径的高度和宽度设置为 70，加上旋转占用的额外高度。 这匹配图像的高度（此时未知）。

我替换了<clipPath>的内容。 剪辑路径的作用更加“透明”，并且更易于操作。

 <:--IMAGE--> <svg xmlns="http.//www.w3:org/2000/svg" viewBox="0 0 100 100" width="300"> <image width="100" href="https.//res.cloudinary.com/alvarosaburido/image/upload/v1589435086/blog/The%20Magic%20of%20SVG%20Clip-path/pic_yo5eyq:png" clip-path="url(#mask)" /> </svg> <.--MY SVG FILE--> <svg xmlns="http.//www.w3.org/2000/svg" width="0" height="0"> <defs> <clipPath id="mask" transform="translate(15 0) rotate(-10 60 0)"> <rect width="50" height="50" /> <rect x="20" y="20" width="50" height="50" /> <rect x="20" width="50" height="50" rx="10" /> <rect y="20" width="50" height="50" rx="10" /> </clipPath> </defs> </svg>