css - 剪辑路径 url 找不到 id

Question

我有一个 SVG，我试图用它来剪辑一个 div，但是我给 <clipPath 的 id > 标签不起作用。

我已经尝试更改 ID，并确保 SVG 确实存在于同一文件中，并且 ID 可见。

svg 是这样的:

<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 149.559">
    <defs>
    <clipPath id="clipper">
    <g id="svgg" stroke="none" fill-rule="evenodd">
         <path  id="path0" d= .../>
         <path  id="path1" d= .../>
         <path  id="path2" d= .../>
         <path  id="path3" d= .../>
         <path  id="path4" d= .../>
    </g>
    </clipPath>
    </defs>
</svg>

我添加了 <defs>和 <clipPath>标记，这样我就可以使用我拥有的 svg 作为剪贴蒙版。

正在使用的 html 元素是:

<div class="logo-bg" style="clipPath: url(#clipper)"></div>

div 确实有宽度和高度。

在开发人员工具中，div 的 css 属性我正在尝试使用 clip-path: url(#clip-id) 剪辑显示“无法加载图像”。理想情况下，我可以使用 SVG 剪辑 div。

这是我正在使用的代码:https://jsfiddle.net/mzLtsqva/6/

我是 SVG 的新手，如果能帮助我解决这个问题，我将不胜感激。

Answer 1

在<clipPath>里面不要将路径包装在组元素中。

在下一个示例中，我使用了一个不起作用的剪切路径:#no一个正在工作:#yes .在不起作用的那个中，我将元素包装在 <g> 中元素。

svg{border:1px solid;}

<svg width="250" height="250" viewBox="0 0 250 250" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
 <rect id="rect" x ="0" y ="0" height ="150" width ="70" style ="stroke:#000;" transform="translate(90, 50)"/> 
 <clipPath id="no"> 
   <g>
    <use xlink:href="#rect" fill="none"></use>
    <use xlink:href="#rect" fill="none" transform="rotate(60 125 125)"></use>
    <use xlink:href="#rect" fill="none" transform="rotate(-60 125 125)"></use>
    </g>
 </clipPath>   
  </defs>
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" height="250" width="250" x="-15" y ="50" clip-path="url(#no)"></image>  
</svg>

<svg width="250" height="250" viewBox="0 0 250 250" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>  
 <clipPath id="yes">  
    <use xlink:href="#rect" fill="none"></use>
    <use xlink:href="#rect" fill="none" transform="rotate(60 125 125)"></use>
    <use xlink:href="#rect" fill="none" transform="rotate(-60 125 125)"></use>  
 </clipPath>   
  </defs>
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" height="250" width="250" x="-15" y ="50" clip-path="url(#yes)"></image>  
</svg>