Question

我目前正在生成以下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>

但是，剪切的图像与路径正下方的图像不同。我认为这可能与剪切路径和图像的变换如何相互作用有关。任何帮助将不胜感激！

Answer 1

我不确定我是否理解你的问题，但你在代码“图像/路径供参考”中的注释看起来像你不希望它们实际上直接渲染，但只能在以后用作剪辑路径和剪切图像。因此，您可能希望将它们放入<defs>元素（try on Tinkerbin），否则您将在未剪切的图像上获得剪切图像的叠加，这意味着剪切的图像被“隐藏” ”

<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>

修改：事实证明OP的问题是Chrome错误。

在反射以后的SVG图象剪报面具

1 个答案: