SVG圖像剪貼掩模反射

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

然而，截取圖像從什麼是正下方的路徑不同。我認爲這可能與裁剪路徑和圖像交互的轉換有關。任何幫助將不勝感激！

來源

2012-12-31 niko246

我不確定我是否理解你的問題，但是你在代碼「image/path for reference」中的註釋對我來說就像你不希望它們直接被渲染，而只是在稍後被使用作爲剪輯路徑和剪輯圖像。因此，您可能希望將它們放入<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>

編輯：原來的業務方案的問題是Chrome錯誤。

來源

2012-12-31 06:54:58

嗨托馬斯，感謝您的回覆。我正在渲染參考圖像以澄清問題。給定參考路徑和參考圖像，我期望剪切蒙版有不同的結果。 – niko246

那你期望什麼？ –

我期望的路徑會導致由路徑中的像素組成的剪輯圖像。相反，我們從原始圖像的不同區域獲取剪輯圖像。換句話說，我希望我的代碼的結果只是顯示路徑的黑色輪廓的原始圖像。非常感謝您回覆我。 – niko246

SVG圖像剪貼掩模反射

回答

相關問題