Question

我有一个要用来裁剪div的SVG，但是我给<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进行裁剪的clip-path: url(#clip-id)的css属性显示“无法加载图像”。理想情况下，我将能够使用SVG剪辑div。

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

我刚接触SVG，因此希望能为解决此问题提供帮助。

Answer 1

在<clipPath>内不要将路径包装在group元素中。

在下一个示例中，我使用了一个无效的剪切路径：#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>

剪辑路径网址找不到ID

1 个答案: