剪辑路径svg多边形Internet Explorer [英] clip-path svg polygon Internet explorer

问题描述

这段代码在ie中不起作用，我需要使用它，因为我必须在地图上的某个点后面制作一个箭头。

 < div style =width：100％; height：100％; background：red; clip-path：url（#cliparrow）; position：absolute; right：0px; top：0px; -webkit- clip-path：polygon（777px 285px，0px 303px，777px 315px）;>< / div> 
< svg height =0width =0style =float：left; position：absolute; width：0; height：0; version =1.1xmlns =http://www.w3.org/2000/svgxmlns：xlink =http://www.w3.org/1999/xlink> 
< defs> 
< clipPath id =cliparrow> 
 < / clipPath> 
< / defs> 
< / svg> 
  

有什么建议吗？
谢谢

解决方案

Internet Explorer 不是通过 HTML 元素上的CSS使用剪辑路径（请参见可以使用）。 剪辑路径目前只是HTML的候选推荐，尚未在规范中提供（ http://www.w3.org/TR/css-masking-1/ ）。

但是，您可以使用剪辑路径作为另一个SVG元素上的SVG属性（例如，如果您在 SVG中的裁剪和遮罩，它将在IE中运行）。

如果您只需要do嵌入了一个彩色的形状，并且本身并不转换HTML内容（例如，对HTML文本，多个元素等应用裁剪），甚至可以更简单地使用适当形状的SVG元素（如果需要，直接嵌入在其他透明的div中）而不是试图剪辑HTML元素。这也消除了浏览器特定webkit前缀的需要。

 < div> 
< svg width =700pxheight =700pxxmlns =http://www.w3.org/2000/svg> 
< polygon id =arrowpoints =777,285 0,303 777,315>< / polygon> 
< / svg> 
< / div> 
  

示例小提琴（带有一些额外的助手）： http://jsfiddle.net/taswyn/cv6m76m7/

（您显然需要设置高度和宽度，这只是使用你的形状的一个简单的例子。注意使用SVG CSS在箭头上应用颜色，这个方法允许）

使用IE 9和10种浏览器模式在IE 10中测试（并在Chrome中进行测试）。如果你确实需要对文本进行裁剪，你需要使用SVG文本而不是HTML文本元素。

p>

另外：如果你只需要剪切一个矩形，你可以暂时使用 clip CSS，浏览器兼容但不推荐使用，直到屏蔽模块达到推荐状态并且剪辑路径可用于HTML作为W3C标准。 （显然这不适用于你的情况，但它可能有助于其他人）

This code does not work in ie, I need to use it because I have to make an arrow that follows a point on the map.

<div style="width:100%;height:100%;background:red;clip-path:url(#cliparrow);position:absolute;right:0px;top:0px; -webkit-clip-path:polygon(777px 285px,0px 303px, 777px 315px);"></div>
<svg height="0" width="0" style="float:left;position:absolute;width:0;height:0;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <clipPath id="cliparrow">
            <polygon points="777,285 0,303 777,315" ></polygon>
        </clipPath>
    </defs>
</svg>

Any suggestions? Thanks

解决方案

Internet Explorer is not (currently) compatible with using clip-path via CSS on HTML elements (see can-i-use). clip-path is currently only a candidate recommendation for HTML and not yet in the spec (http://www.w3.org/TR/css-masking-1/).

You may, however, use clip-path as an SVG attribute on another SVG element (for example, if you load the MDN page on clipping and masking in SVG, it will work in IE).

If all you need to do is embed a colored shape, and not transform HTML content per se (e.g. apply clipping against HTML text, multiple elements, etc), you could even more simply just use an appropriately shaped SVG element (directly embedded in an otherwise transparent div if needed) instead of trying to clip an HTML element. This also removes the need for the browser specific webkit prefix.

<div>
    <svg width="700px" height="700px" xmlns="http://www.w3.org/2000/svg">
        <polygon id="arrow" points="777,285 0,303 777,315" ></polygon>
    </svg>
</div>

example fiddle (with some extra helpers): http://jsfiddle.net/taswyn/cv6m76m7/

(You'll obviously need to set height and width appropriately, this was just a quick example using your shape. Note the use of SVG CSS to apply the color on the arrow, which this method allows)

Tested in IE 10 using IE 9 and 10 browser modes (and tested in Chrome). Probably won't work in 8 and below.

If you do need to clip against text, you'll need to use SVG text instead of HTML text elements.

Aside: If all you need to do is clip in a rectangle, you could temporarily use clip CSS, which is cross-browser compatible but deprecated, until the masking module hits recommendation status and clip-path becomes available for use on HTML as a W3C standard. (obviously this doesn't apply to your situation, but it may help someone else)

这篇关于剪辑路径svg多边形Internet Explorer的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！