我有一個簡單的SVG圖形，有一個用于遮罩的路徑。當我把#myMask分配給該物件時，遮罩就完全不起作用了。 這應該是很明顯的事情，但我沒有看到它。
CodePen: https://codepen.io/ambidustrious/pen/powddJd
有什么想法？
<?xml version="1.0" encoding="utf-8"? >
<svg version="1。 1" id="Layer_1" x="0px"/span> y="0px"/span> viewBox="0 0 527. 8 498.1" style="enable-background:new 0 0 527.8 498.1;" xmlns="http://www.w3.org/2000/svg"/span>>
<defs>/span>
< mask id="myMask" x="0"/span> y="0" width="1" height="1" maskUnits="userSpaceOnUse"/span>>
< path id="mask" class="st2" d="M 113. 297 497.17 L 113.297 300.87 C 113.397 239.27 163.297 205.07 224.997 205.07 L 300.697 205.07 C 330.997 206. 07 418.497 106.27 432.997 91.67 L 527.297 0. 57" fill="none" stroke="#fff" stroke attr">stroke-miterlimit="10" stroke-width="58" >
</path>
</mask>/span>
</defs>/span>
<g id=" arrow" transform=" matrix（1, 0, 0, 1, 1190. 697021, 194.369995)" mask="url(#myMask)" >
< linearGradient id="Union_6_00000050629510371142239550000012438780590208862086_" gradientUnits="userSpaceOnUse"/span> x1="-1883. 5894" y1="595. 0461"/span> x2="-1883.5894"/span> y2="594。 0461" gradientTransform="matrix(432.3066 0 0 -496.631 813408.6875 295324.4688)">
<stop offset="0" style="stop-color。 #E89657"/>
<stop offset="1" style="stop-color: #D8251F"/>
</linearGradient>/span>
<path id="Union_6" style=fill。 url(#Union_6_00000050629510371142239550000012438780590208862086_);" d="m-1095. 7 302.8V-196.3C.1-61 .6 50-111.6 111.7-111.7H75.7C20.6.1 40.3-8.1 54.8-22.7L148.7-148.7-17.2-17.2 58.6 0 0 58.6-17.2-17.2-148.7 148.6C-10。 4 10.4-22.7 18.6-36.2 24.2c-13.5 5.6-28.1 8.5-42.7 8.5h-75.8c-42.8 0-77.5 34.7-77.6 77.6v196.3h-34.1z"/span> />
</g>
</svg>
uj5u.com熱心網友回復：
我認為，有一些關于元素的位置。然后你的面具或多或少覆寫了整個箭頭。我清理了一下，把你的元素定位在 "0 0 500 500 "的viewBox中，這樣就不需要使用transform/translate。
。< svg viewBox="0 0 500 500"/span> xmlns="http: //www. w3.org/2000/svg">。
<defs>
< mask id="myMask" x="0" y="0" maskUnits="userSpaceOnUse">>
< path id="mask" class="st2" d="m 20. 307087,495.15767 V -196.3 C 0.1,-61.6 50,-95.8 111.700063,-95.8 H 75.7 C 30.3,1 117.8,-98.79997 132. 3,-113.399929 l 94.3,-91. 1000322" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="58" />
</mask>
< linearGradient id="LG01" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color: #E89657"/>
<stop offset="1" style="stop-color: #D8251F"/>
</linearGradient>/span>
</defs>/span>
< g id="arrow" mask="url(#myMask)">
<path id="Union_6"/span> style="fill: url(#LG01);" d="M 0，496。 6 V 300.3 C 0.1,238.7 50,188.7 111.7,188.6 H 75.7 C 20.6,0.1 40.3,-8.1 54.8,-22.7 L 390.9,17.2 373.7,0 h 58.6 V 58.6 L 415.1, 41.4 266. 4,190 C -10.4,10.4 -22.7,18.6 -36.2,24.2 -13.5,5.6 -28.1,8.5 -42.7,8.5 H -75.8 C -42.8,0 -77.5,34.7 -77.6,77.6 V 196.3 Z"/span> />/span>
</g>
</svg>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/320104.html
標籤：