内部和外部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 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属性来提供一个实际形状（如我上面提到的），或通过网址（）。后者指向DOM中的现有SVG（“内部SVG”）或指向包含SVG（“外部SVG”）的实际URL。
一个例子，你可以在这里找到：​​

 
基础上的例子，我更新了小提琴：https://jsfiddle.net/stjtudvj/2/
我固定直列#triangle SVG。您的值超过了图片尺寸。

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