SVG clip-path works in Chrome, but not in Firefox or Safari

问题

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.

回答1:

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.

来源：https://stackoverflow.com/questions/32146904/svg-clip-path-works-in-chrome-but-not-in-firefox-or-safari

标签

javascript

css

d3.js

svg