Question

我正在关注mozilla documentation使用css clip-path属性将svg clipPath应用于HTMLElement。但由于某种原因，它不适用于我，不适用于div而不适用于图像。

在文档中，它表示您可以使用以下代码轻松剪辑元素：

<style>.target { clip-path: url(#c1); }</style>
<svg:svg height="0">
  <svg:clipPath id="c1" clipPathUnits="objectBoundingBox">
    <svg:circle cx="0.25" cy="0.25" r="0.25" id="circle"/>
    <svg:rect x="0.5" y="0.2" width="0.5" height="0.8"/>
  </svg:clipPath>
</svg:svg>

我已经尝试过，但它不起作用。 clip-path属性使用预定义的方法，如polygon（）和ellipse（），但它不适用于链接的svg。

我做了JSFiddle说明了我的问题，希望你能找到我的错误：）

Answer 1

将clipPath放入defs代码中。使用foreignObject导入需要修剪的HTML元素，并应用内联clip-path以获得最大的浏览器支持。

＆＃13;

#kitten {
  width: 250px;
}
#kittenReplica {
  width: 250px;
  height: 187.5px;
  background-color: lightblue;
}

＆＃13;

<svg width="500px" height="187.5px">
  <defs>
    <clipPath id="path" clipPathUnits="objectBoundingBox">
      <circle cx="0.25" cy="0.25" r="0.25" id="circle" />
      <rect x="0.5" y="0.2" width="0.5" height="0.8" />
    </clipPath>
  </defs>
  <foreignObject clip-path="url(#path)" width="50%" height="100%">
    <img src="http://i.imgur.com/tzPv43g.jpg" id="kitten" class="clipped" />
  </foreignObject>
  <foreignObject x="250" clip-path="url(#path)" width="50%" height="100%">
    <div id="kittenReplica" class="clipped"></div>
  </foreignObject>
</svg>

＆＃13;

Answer 2

你的问题是你使用了＆＃34; svg＆＃34;名称空间前缀，但不定义svg名称空间。如果您删除＆＃34; svg：＆＃34;从每个元素，它的工作原理。

例如，将<svg:svg ...>更改为<svg ...>。

如果查看从中复制的原始Firefox示例，您将看到svg名称空间在<html>元素中定义：xmlns:svg="http://www.w3.org/2000/svg"。

以下是适用于Firefox和Chrome的示例版本。

here is an updated version of your fiddle that works.

＆＃13;

body {
    background:#ccc;
    font-size:30px;
}

p {
    width:300px;
    border:1px solid black;
    display:inline-block;
    margin:1em;
}

b {
    outline:1px dotted blue;
}

.target {
    -webkit-clip-path: url(#c1);
    clip-path: url(#c1);
}

＆＃13;

<p class="target" style="background:lime;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
 
<img src="http://i.imgur.com/tzPv43g.jpg" id="kitten" class="target" />


<svg height="0">
    <defs>
        <clipPath id="c1" clipPathUnits="objectBoundingBox">
            <circle cx="0.25" cy="0.25" r="0.25" id="circle"/>
            <rect x="0.5" y="0.2" width="0.5" height="0.8"/>
        </clipPath>
    </defs>
</svg>

＆＃13;

当它的源是svg时，为什么我的剪辑路径不起作用？

2 个答案: