当前位置:优学网  >  在线题库

SVG:掩蔽的意外结果

发表时间:2022-07-21 00:00:30 阅读:110

我有以下代码来屏蔽虚线:

&lt!-开始代码段:js hide:false控制台:true babel:false--&gt

&lt!-语言:lang html--&gt

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" viewBox="0 0 747 489">
  <defs>
    <mask id="mask">
      <path d="M0 0 h747 v489 H0z" fill="#000" />
      <path fill="none" stroke="#fff" stroke-linecap="round" stroke-width="10" d="M 454.711,278.09 V 0"/>
    </mask>
  </defs>
  <path mask="url(#mask)" d="M 454.711,278.09 V 0" stroke="#38a3a5" stroke-dasharray="1.35 2.70999999999999996" stroke-linecap="round" stroke-width=".676"/>
</svg>

&lt!-结束代码段--&gt

我希望它是可见的,因为我使用与掩码相同的路径,笔划为#fff,但由于某种原因,路径没有显示出来.

有谁能帮我弄清楚为什么这不起作用吗?

提前感谢!

🎖️ 优质答案
相关问题