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

<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 に答える