Mask旋轉的SVG元素

我使用svg.js來繪製我的SVG。我想知道，是否可以遮罩旋轉的元素。我可以實現旋轉蒙版元素，這是不一樣的。Mask旋轉的SVG元素

查看最小工作示例 - http://jsfiddle.net/mreq/LP7sa/1/ - 我想旋轉的圖像被紅色矩形遮罩。此例產生下面的代碼：

<svg xmlns="http://www.w3.org/2000/svg" id="SvgjsSvg1000" version="1.1" width="100%" height="100%" xlink="http://www.w3.org/1999/xlink" style="position:relative;overflow:hidden;left:0px;top:0px;"> 
<rect id="SvgjsRect1003" width="50%" height="50%" y="75" x="125" fill="red"/> 
<image id="SvgjsImage1004" href="http://t1.gstatic.com/images?q=tbn:ANd9GcQo_CFlPKdX-_-EEs34S-Y8T9l2kVNY59fwfhCKHBK90XSwS21grA" width="400" height="250" transform="rotate(75 200 125)" mask="url(&quot;#SvgjsMask1005&quot;)"/> 
<defs id="SvgjsDefs1001"> 
    <mask id="SvgjsMask1005"> 
     <rect id="SvgjsRect1002" width="50%" height="50%" fill="#ffffff" x="125" y="75"/> 
    </mask> 
</defs> 
</svg>

的溶液可以是一個通用的SVG一個 - 它不必須使用svg.js並且可以使用任何其他庫。我嘗試旋轉蒙版矩形，但這不會做，因爲我需要調整大小，移動和翻轉圖像。

來源

2013-07-17 mreq

只要把面具（或夾路徑）父<g>元素，像this：

<svg xmlns="http://www.w3.org/2000/svg" id="SvgjsSvg1000" version="1.1" width="100%" height="100%" xlink="http://www.w3.org/1999/xlink" style="position:relative;overflow:hidden;left:0px;top:0px;"> 
    <defs> 
     <mask id="mask" maskUnits="userSpaceOnUse"> 
      <rect id="SvgjsRect1003" width="50%" height="20%" y="75" x="125" fill="white"/> 
     </mask> 
    </defs> 
    <g mask="url(#mask)"> 
     <image id="SvgjsImage1004" xlink:href="http://t1.gstatic.com/images?q=tbn:ANd9GcQo_CFlPKdX-_-EEs34S-Y8T9l2kVNY59fwfhCKHBK90XSwS21grA" width="400" height="250" transform="rotate(75 200 125)" /> 
    </g> 
</svg>

來源

2013-07-17 12:12:28

驚人！非常感謝，您從重寫整個應用程序到HTML5畫布節省了我。如果只有我可以不止一次地升級。 – mreq

Mask旋轉的SVG元素

回答

相關問題