插入两个 SVG 路径

时间:2021-05-31 04:57:18

标签: javascript svg

我正在寻找一个库或解决方案,您可以在其中插入(或填充)两个 SVG 路径。结果是 3d 阴影。

enter image description here

我知道有一个 CSS 解决方案,它使用过滤器属性中的 dropshadow 值。

.letter {
  filter: drop-shadow(1px 1px 0 #ff8080) drop-shadow(1px 1px 0 #ff8080)
    drop-shadow(1px 1px 0 #ff8080) drop-shadow(1px 1px 0 #ff8080)
    drop-shadow(1px 1px 0 #ff8080) drop-shadow(1px 1px 0 #ff8080)
    drop-shadow(1px 1px 0 #ff8080) drop-shadow(1px 1px 0 #ff8080)
    drop-shadow(1px 1px 0 #ff8080) drop-shadow(1px 1px 0 #ff8080)
    drop-shadow(1px 1px 0 #ff8080) drop-shadow(1px 1px 0 #ff8080);
}

svg {
  width: 200px;
}
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 333.375 314.012">
    <path paint-order="markers fill stroke" d="M0 0h333.375v314.012H0z" />
    <path class="letter"
      d="M140.283 112.993q15.346 0 27.717 7.673 12.587 7.69 19.625 21.33 7.238 13.424 7.238 30.057t-7.656 30.274q-7.69 13.44-21.314 21.33-13.44 7.69-29.856 7.69-16.415 0-29.855-7.69-13.223-7.89-21.13-21.33-7.673-13.64-7.673-30.274V74.83q0-4.914 2.992-7.89 3.176-2.992 7.874-2.992 4.898 0 7.873 2.992 3.01 2.976 3.01 7.89v57.572q7.438-9.177 18.103-14.292 10.665-5.116 23.036-5.116zm-4.262 99.147q10.665 0 19.19-5.116 8.743-5.332 13.641-14.493 5.115-9.177 5.115-20.478 0-11.3-5.115-20.26-4.898-9.161-13.64-14.276-8.526-5.35-19.191-5.35-10.666 0-19.408 5.35-8.526 5.115-13.44 14.276-4.898 8.96-4.898 20.26t4.898 20.478q4.914 9.16 13.44 14.493 8.742 5.116 19.39 5.116z"
      fill="#fff" />
  </svg>

但我想要一个 SVG 路径解决方案,因为我想在“阴影”路径上应用一些东西,例如遮罩。

0 个答案:

没有答案
相关问题