反射后的SVG图像剪辑掩模

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

---

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

我不确定是否理解您的问题，但您在代码“image/path for reference”中的注释在我看来似乎不希望直接渲染它们，而只是在以后用作剪辑路径和剪辑图像。因此，您可能希望将它们放在

元素（）中，因为否则会在未剪裁的图像上覆盖剪裁图像，这意味着剪裁图像是“隐藏”的

---

编辑：原来OP的问题是一个Chrome bug。

我不确定是否理解您的问题，但您在代码“供参考的图像/路径”中的注释在我看来似乎不希望它们实际直接渲染，而只是稍后用作剪辑路径和剪辑图像。因此，您可能希望将它们放在

元素（）中，因为否则会在未剪裁的图像上覆盖剪裁图像，这意味着剪裁图像是“隐藏”的

---

编辑：原来OP的问题是一个Chrome bug。

嗨，托马斯，谢谢你的回复。我正在渲染参考图像以澄清问题。给定参考路径和参考图像，我希望剪切遮罩会产生不同的结果。我希望路径会产生一个由路径内的像素组成的剪切图像。取而代之的是，我们从原始图像的另一个区域获得一个剪辑图像。换句话说，我希望代码的结果只是原始图像，带有显示路径的黑色轮廓。非常感谢您回复我。这正是我在除Chrome/Chrome之外的所有浏览器（Firefox、IE9、Opera、Safari/Windows）中所得到的。（尝试几种不同的浏览器会有所帮助。）这不是一个真正令人满意的答案，但是你唯一能做的就是为Chromium提交一个bug报告，或者避免转换。谢谢，这会清除很多问题。不幸的是，我无法避免这个项目的转换。我刚刚向Chrome提交了一份bug报告。嗨，托马斯，谢谢你的回复。我正在渲染参考图像以澄清问题。给定参考路径和参考图像，我希望剪切遮罩会产生不同的结果。我希望路径会产生一个由路径内的像素组成的剪切图像。取而代之的是，我们从原始图像的另一个区域获得一个剪辑图像。换句话说，我希望代码的结果只是原始图像，带有显示路径的黑色轮廓。非常感谢您回复我。这正是我在除Chrome/Chrome之外的所有浏览器（Firefox、IE9、Opera、Safari/Windows）中所得到的。（尝试几种不同的浏览器会有所帮助。）这不是一个真正令人满意的答案，但是你唯一能做的就是为Chromium提交一个bug报告，或者避免转换。谢谢，这会清除很多问题。不幸的是，我无法避免这个项目的转换。我刚刚向Chrome提交了一份bug报告。

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