当前位置 : 主页 > 网页制作 > css >

css – SVG路径的手绘(蜡笔)风格?

来源:互联网 收集:自由互联 发布时间:2021-06-13
SVG路径通常看起来像一条实线: 是否可以为SVG路径实现手绘(蜡笔)样式? 您可以使用svg的过滤器尝试这样的事情 svg width="1000" height="500" defs filter id="filter" height="2" width="2" feTurbulence bas
SVG路径通常看起来像一条实线:

是否可以为SVG路径实现手绘(蜡笔)样式?

您可以使用svg的过滤器尝试这样的事情

<svg width="1000" height="500">
    <defs>
    <filter id="filter" height="2" width="2">
      <feTurbulence baseFrequency="0.2" numOctaves="3" type="fractalNoise" />
      <feDisplacementMap  scale="80"  xChannelSelector="R" in="SourceGraphic" />
     
    </filter>
    </defs>
    <path d="m 100 100 l 200 10" stroke="black" stroke-width="20" style="filter:url(#filter)"/>
网友评论