Question

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

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

我尝试在此处使用此工具：http://cssplant.com/clip-path-generator

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

这是我的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 clipPath。它永远不会是一个图像（如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（＆＃34;内部SVG＆＃34;）或指向包含SVG的实际URL（＆＃34;外部SVG＆＃34;）。您可以在此处找到示例：http://codepen.io/imohkay/pen/GJpxXY

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

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

内部和外部SVG的剪辑路径

1 个答案: