剪輯路徑中的外部 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>