内部和外部 SVG 的剪辑路径 [英] Clip-path for internal and external SVG

问题描述

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

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

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

并获取它的POINTS"坐标以在我的内部和外部 SVG 上创建完美的剪辑三角形，但没有运气.

这是我的 HTML:

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

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

这是 CSS:

.clip-holder {显示:内联块；填充:0；边距:30px；}.clip-css {-webkit-clip-path: 多边形(50% 0%, 0% 100%, 100% 100%);剪辑路径:多边形(50% 0%、0% 100%、100% 100%)；}.clip-svg {宽度:0；高度:0；边距:0 自动；}.clip-svg-inline {-webkit-clip-path: url("#triangle");剪辑路径: url("#triangle");}.clip-svg-external {-webkit-clip-path: url("https://www.thesun.co.uk/wp-content/uploads/2016/06/nintchdbpict000244881006.jpgt");剪辑路径:url("https://www.thesun.co.uk/wp-content/uploads/2016/06/nintchdbpict000244881006.jpg");}

我犯了什么错误吗?

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

(向我展示 jsfiddle 解决方案以便更好地理解)

解决方案

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 {剪辑路径:多边形(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

I am trying to create a triangle using internal and external SVG.

However for some reason it won't work.

I tried to use this tool here: http://cssplant.com/clip-path-generator

and get it's "POINTS" coordinates to create a perfect clip TRIANGLE on my internal and external SVG but no luck.

Here's my 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>        

And here's the 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");
}    

Am i making any mistakes?

Here's the JSFIDDLE: https://jsfiddle.net/stjtudvj/

(show me jsfiddle solution for better understanding)

解决方案

The actual value of the clip-path property has to be an SVG clipPath. It can never be an image (like a JPG). It always to be the actual shape that should be applied on your image.

For example these are clipPath elements: https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Anzeige/clip-path#Grundformen_.28basic_shapes.29.
There is an example too, which pretty much looks like what you try to accomplish: https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Anzeige/clip-path#Anwendungsbeispiel.

 
So basically you apply a your predefined shape (e.g. by using your linked generator) to an image using the CSS-property clipPath (which describes the shape). Like this:

HTML

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

CSS

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

 
You can use the clip-path property to supply an actual shape (like I mentioned above) or via url(). Latter is pointing either to an existing SVG in the DOM ("internal SVG") or to an actual URL containing an SVG ("external SVG").
An example you can find here: http://codepen.io/imohkay/pen/GJpxXY

 
Based on that example I updated your fiddle: https://jsfiddle.net/stjtudvj/2/
I fixed the inline #triangle SVG. Your values were exceeding the image dimensions.

 
Please keep in mind, that not all browsers support this property fully yet: http://caniuse.com/#search=clip-path

这篇关于内部和外部 SVG 的剪辑路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！