0

Here's an example some SVG - with a yellow ring shown next to a red semi-circle. The semi-circle is then transformed and used as a clipPath to hide some of the yellow ring - leaving an arc.

It works in IE11 and in the Windows 10 PowerToy which shows SVG file previews in Explorer. But in Chrome/Edge/Firefox, no clipping occurs and the entire yellow ring is visible...

I've had this issue before, worked around it and forgotten all the details. Now it's come up again, so I thought I'd raise it here in case someone can explain what's going on.

<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 768 576" xmlns="http://www.w3.org/2000/svg">
  <path id="bg" d="M0 0h768v576H0z"/>
  <circle cx="384" cy="228" r="167" stroke="#ff0" stroke-width="15" fill-opacity="0" />
  <g clip-path="url(#cp1)">
    <use height="374.0" transform="matrix(0.8405, -0.6003, -0.5903, -0.8547, 495.3025, 387.3162)" width="187.05" xlink:href="#semi-circle"/>
  </g>
  <use xlink:href="#semi-circle" fill="red" transform="translate(20 20)" />
  <defs>
    <g id="semi-circle" transform="matrix(1.0, 0.0, 0.0, 1.0, 93.5, 187.0)">
      <path d="M-93.45 -187.0 Q-16.05 -187.0 38.75 -132.2 93.55 -77.45 93.55 0.0 93.55 77.45 38.75 132.25 -16.05 187.0 -93.45 187.0 L-93.5 187.0 -93.5 -187.0 -93.45 -187.0"/>
    </g>
    <clipPath id="cp1">
      <use height="374.0" transform="matrix(1.0273, 0.0547, -0.0538, 1.0447, 394.9601, 32.1191)" width="187.05" xlink:href="#semi-circle"/>
    </clipPath>    
  </defs>
</svg>
Andrew Wiseman
  • 21

1 Answers1

0

OK - so I know why thanks to seeing a similar question when I posted this one... SVG Not Displaying Completely in Chrome/Firefox

The spec says a clipPath must only contain certain elements (a <g> is not allowed, for example). <use> is allowed but what it refers to must again be a path or a simple shape (again not a <g>).

So the fix here is to make the semi-circle shape out of just a path, moving the id and transform attributes to it. (Seems a shame you can't use a group element, though.)

Here's the fix working in all browsers...

<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 768 576" xmlns="http://www.w3.org/2000/svg">
  <path id="bg" d="M0 0h768v576H0z"/>
  <circle cx="384" cy="228" r="167" stroke="#ff0" stroke-width="15" fill-opacity="0" />
  <g clip-path="url(#cp1)">
    <use height="374.0" transform="matrix(0.8405, -0.6003, -0.5903, -0.8547, 495.3025, 387.3162)" width="187.05" xlink:href="#semi-circle"/>
  </g>
  <use xlink:href="#semi-circle" fill="red" transform="translate(20 20)" />
  <defs>
    <path id="semi-circle" d="M-93.45 -187.0 Q-16.05 -187.0 38.75 -132.2 93.55 -77.45 93.55 0.0 93.55 77.45 38.75 132.25 -16.05 187.0 -93.45 187.0 L-93.5 187.0 -93.5 -187.0 -93.45 -187.0" transform="matrix(1.0, 0.0, 0.0, 1.0, 93.5, 187.0)"/>
    <clipPath id="cp1">
      <use height="374.0" transform="matrix(1.0273, 0.0547, -0.0538, 1.0447, 394.9601, 32.1191)" width="187.05" xlink:href="#semi-circle"/>
    </clipPath>    
  </defs>
</svg>
Andrew Wiseman
  • 21