Home/ Questions/Q 9061293
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T15:26:48+00:00

I’m currently generating the following svg: <!–add full image for reference–> <image id=refImageMirror x=0

  • 0

I’m currently generating the following svg:

<!--add full image for reference-->
<image id="refImageMirror" x="0" y="0" class="dot" width="500" height="500" opacity="1" xlink:href="http://www.nyweamet.org/wp-content/uploads/2011/09/0942a__grandCentralStationExterior.jpg" transform="scale(1,-1) translate(0, -500)"></image>

<!--add full path for reference-->
<path id="refPathMirror" class="geom" transform="scale(1,-1) translate(0,-210)" d="M200,0A200,200 0 0,1 141.4213562373095,141.42135623730948L0,0Z" style="fill: none; stroke: black"></path>

<use id="clippedImage" xlink:href="#refImageMirror" clip-path="url(#myMirrorClipper)"></use>

<clipPath id="myMirrorClipper">
        <use xlink:href="#refPathMirror"></use>
</clipPath>

However, the clipped image differs from what is directly below the path. I think this might have to do with how the transformations of the clipping path and of the image interact. Any help would be greatly appreciated!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’m not sure whether I understand your question, but your comments in the code “image/path for reference” look to me like you don’t want them to actually be rendered directly, but only to be used later as a clip path and a clipped image. So, you might want to put them into a <defs> element (try on Tinkerbin) because otherwise you’d get an overlay of a clipped image on top of an unclipped image, which means the clipped image is “concealed”.

    <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="250px">
  <defs>
    <image id="refImageMirror" x="0" y="0" class="dot" width="500" height="500" opacity="1" xlink:href="http://www.nyweamet.org/wp-content/uploads/2011/09/0942a__grandCentralStationExterior.jpg" transform="scale(1,-1) translate(0, -500)"></image>
    <path id="refPathMirror" class="geom" transform="scale(1,-1) translate(0,-210)" d="M200,0A200,200 0 0,1 141.4213562373095,141.42135623730948L0,0Z" style="fill: none; stroke: black"></path>
  </defs>

  <clipPath id="myMirrorClipper">
          <use xlink:href="#refPathMirror"></use>
  </clipPath>
  <use id="clippedImage" xlink:href="#refImageMirror" clip-path="url(#myMirrorClipper)"></use>
</svg>

    Edit: It turns out the the OP’s problem is a Chrome bug.

    • 0