时间戳

首页 > 解决方案 > SVG遮罩问题

svg - SVG遮罩问题

问题描述

我有一个带有蒙版路径的简单 SVG 图形。一旦我将#myMask 分配给对象，掩码就根本不起作用。这应该是显而易见的，但我没有看到。

代码笔： https ://codepen.io/ambidustrious/pen/powddJd

想法？

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 527.8 498.1" style="enable-background:new 0 0 527.8 498.1;" xmlns="http://www.w3.org/2000/svg">


 <defs>  
   <mask id="myMask" x="0" y="0" width="1" height="1" maskUnits="userSpaceOnUse">  
     <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-miterlimit="10" stroke-width="58">
  </path>  
   </mask>  
 </defs>



  <g id="arrow" transform="matrix(1, 0, 0, 1, 1190.697021, 194.369995)"  mask="url(#myMask)" >
    <linearGradient id="Union_6_00000050629510371142239550000012438780590208862086_" gradientUnits="userSpaceOnUse" x1="-1883.5894" y1="595.0461" x2="-1883.5894" 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>
    <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" />
  </g>
    
  
</svg>

标签： svg

解决方案

我认为元素的位置有些问题。然后你的面具或多或少地覆盖了整个箭头。我进行了一些清理并将您的元素放置在“0 0 500 500”的视图框中，因此无需使用转换/翻译。

<svg viewBox="0 0 500 500" 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>
  </defs>
  <g id="arrow"  mask="url(#myMask)">
    <path id="Union_6" 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" />
  </g>
</svg>

推荐阅读