时间戳

首页 > 解决方案 > Creating an outset mask around svg shape

svg - Creating an outset mask around svg shape

问题描述

In an art-project I'm drawing svg-shapes all over the canvas, so that they can overlap at times: enter image description here

In these cases I want the result to look something like this:

enter image description here

I think I would have to create some kind of shape surounding the foreground shape, but I have no clue how I would be able to do that dynamically. Is there even a way to do this? From some other questions I got the hint, there might be a possibility using filters. I would be happy to do it this way if there is no other, but I also heared these filters are quite resource intensive, what would be a problem, since I'm animating quite a bit here.

Hope you can help me. Thanks for your time :)

标签： svgmasksvg-filters

解决方案

如果这些是带有笔触但没有填充的笔触，您可以执行以下操作：您使用不同笔触宽度的每条路径两次

svg{background:#ccc; width:300px;}
<svg viewBox = "0 0 100 100">
  <defs>
    <path id="test" d="M10,75Q33,75 50,50 T90,25" fill="none" />
  </defs>
    <use xlink:href="#test" style="stroke:#fff;stroke-width:10; stroke-linecap: round" />
    <use xlink:href="#test" style="stroke:#000;stroke-width:3; stroke-linecap: round" />

推荐阅读