1

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

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

4

1 回答 1

1

我不确定我是否理解您的问题，但是您在代码“图像/参考路径”中的评论在我看来就像您不希望它们实际直接呈现，而只是稍后用作剪辑路径和一个剪辑的图像。因此，您可能希望将它们放入一个<defs>元素中（尝试使用 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 错误。

于 2012-12-31T06:54:58.707 回答