SVG剪辑路径适用于Chrome，但不适用于Firefox或Safari [英] SVG clip-path works in Chrome, but not in Firefox or Safari

问题描述

我用D3绘制了一个相当复杂的折线图。它使用刷牙缩放数据（使用

解决方案

  clip-path：url（#mainChartClip）; 
  

实际上是

的缩写

  clip-path：url（< this file> #mainChartClip）; 
  

所以在CSS文件中，不太可能指向任何有效的CSS文件不包含mainChartClip元素。

您需要将URL更改为html文件，例如

  clip-path：url（main.html＃mainChartClip）; 
  

不幸的是Chrome得到这个错误（这就是为什么你的代码在那里工作）。他们可能会修复它一天，你的代码将停止工作。

Safari不支持外部clipPath，就我所知，这意味着您的clipPath需要在使用它的文件中定义。也就是说

Firefox支持外部clipPath，但是它遵循的规则在CSS规范，因此您的标记不会在那里工作。

I'm drawing a rather complex line chart with D3. It uses brushing for zooming into the data (used http://bl.ocks.org/mbostock/1667367 as inspiration).

While it works perfectly fine in Chrome, the chart-line ignores the borders specified with clip-path (see the attached picture) in Firefox and Safari, and I have no idea why.

CSS:

clip-path: url(#mainChartClip);

JS:

// Clip = borders the canvas for zoom
svg.append('defs')
   .append('clipPath')
   .attr('id', 'mainChartClip')
   .append('rect')
   .attr('width', width)
   .attr('height', height)
   .attr('transform', 'translate(0,-10)');

Here's the full code: http://codepen.io/anon/pen/RPzeWr

One strange thing: The codepen actually works in Firefox and Safari. Could that be related to the iframe it uses?

I've isolated the chart-code to make 100% sure that it's not some other code influencing, but it's not working when I use the code outside codepen in Firefox or Safari.

解决方案

clip-path: url(#mainChartClip);

is actually short for

clip-path: url(<this file>#mainChartClip);

so in a CSS file that's unlikely to point to anything valid as your CSS file doesn't contain a mainChartClip element.

You need to change the URL point to the html file e.g.

clip-path: url(main.html#mainChartClip);

Unfortunately Chrome gets this wrong (which is why your code works there). They may fix it one day at which point your code would stop working.

Safari doesn't support external clipPaths as far as I know which means your clipPath needs to be defined in the file that uses it. I.e. leaving it in the CSS file and changing it as above likely won't fix things for you.

Firefox does support external clipPaths, but it follows the rules laid out in the CSS specification and so your markup doesn't work there.

这篇关于SVG剪辑路径适用于Chrome，但不适用于Firefox或Safari的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！