内部和外部 SVG 的剪辑路径

Question

我正在尝试使用内部和外部 SVG 创建一个三角形。

但是由于某种原因它不起作用。

我在这里尝试使用这个工具：http://cssplant.com/clip-path-generator

并获得它的“点”坐标以在我的内部和外部 SVG 上创建一个完美的剪辑三角形，但没有运气。

这是我的 HTML：

 <figure class="clip-holder">
    <img src="https://www.thesun.co.uk/wp-content/uploads/2016/06/nintchdbpict000244881006.jpg" class="clip-svg-inline" width="200" height="200">
    <figcaption>Inline SVG</figcaption>
  </figure>

  <figure class="clip-holder">
    <img src="https://www.thesun.co.uk/wp-content/uploads/2016/06/nintchdbpict000244881006.jpg" width="200" height="200">
    <figcaption>External SVG</figcaption>
  </figure>
</div> 

<svg class="clip-svg">
  <defs>
    <clipPath id="triangle" clipPathUnits="objectBoundingBox" >
      <polygon points="120 263,325 262,222 42"/>
    </clipPath>
  </defs>
</svg>        

这是 CSS：

.clip-holder {
  display: inline-block;
  padding: 0;
  margin: 30px;
}

.clip-css {
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.clip-svg {
  width: 0;
  height: 0;
  margin: 0 auto;
}

.clip-svg-inline {
  -webkit-clip-path: url("#triangle");
  clip-path: url("#triangle");
}



.clip-svg-external {
  -webkit-clip-path: url("https://www.thesun.co.uk/wp-content/uploads/2016/06/nintchdbpict000244881006.jpgt");
  clip-path: url("https://www.thesun.co.uk/wp-content/uploads/2016/06/nintchdbpict000244881006.jpg");
}    

我犯了什么错误吗？

这是 JSFIDDLE：https://jsfiddle.net/stjtudvj/

（显示 jsfiddle 解决方案以便更好地理解）

Answer 1

clip-path 属性的实际值必须是 SVG 剪辑路径。它永远不能是图像（如 JPG）。它始终是应该应用于您的图像的实际形状。

例如，这些是 clipPath 元素：https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Anzeige/clip-path#Grundformen_.28basic_shapes.29。
还有一个例子，看起来很像你试图完成的事情：https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Anzeige/clip-path#Anwendungsbeispiel。

 
因此，基本上，您使用 CSS 属性 clipPath（描述形状）将预定义的形状（例如，通过使用链接的生成器）应用于图像。像这样：

HTML

<img src="/path/to/my/image.jpg" id="triangle" />

CSS

img#triangle {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

 
你可以使用clip-path 属性来提供一个实际的形状（就像我上面提到的）或者通过url()。后者指向 DOM 中的现有 SVG（“内部 SVG”）或包含 SVG 的实际 URL（“外部 SVG”）。
您可以在此处找到一个示例：http://codepen.io/imohkay/pen/GJpxXY

 
基于该示例，我更新了您的小提琴：https://jsfiddle.net/stjtudvj/2/
我修复了内联 #triangle SVG。您的值超出了图片尺寸。

 
请记住，并非所有浏览器都完全支持此属性：http://caniuse.com/#search=clip-path