Question

我尝试了将DropShadow应用于现有网站（例如like this one或like w3Schools explained）上许多网站提到的路径

但是颤动根本没有呈现出来，浏览器显示了其中的一些（当在PC上本地打开时），或者其中的一些仅在以JavaScript（！

仍然尝试通过svg元素执行此操作，而不会将base64图像作为阴影投射到svg内，因为使用起来有些棘手。

有人曾经尝试过吗？

：心动

这是我的svg文件（没有dropShadow）：

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 10.428 10.062">
        <g transform="translate(0 2) rotate(-30)" fill="#ee8c8c">
            <path d="M 7.138411045074463 6.5 L 0.8615883588790894 6.5 L 3.999999761581421 1.007779955863953 L 7.138411045074463 6.5 Z" stroke="none"/>
            <path d="M 3.999999761581421 2.015560150146484 L 1.723176956176758 6 L 6.276822566986084 6 L 3.999999761581421 2.015560150146484 M 3.999999761581421 0 L 8 7 L -4.76837158203125e-07 7 L 3.999999761581421 0 Z" stroke="none" fill="#ee8c8c"/>
        </g>
</svg>

这是我已经尝试过的方法之一：

<svg>

  <defs>
    <filter id="drop-shadow">
      <feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
      <feOffset dx="5" dy="5" result="offsetblur"/>
      <feFlood flood-color="red"/>
      <feComposite in2="offsetblur" operator="in"/>
      <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter> 
  </defs>

  <g transform="translate(0 2) rotate(-30)" fill="#ee8c8c" filter="url(#drop-shadow)">
    <path d="M 7.138411045074463 6.5 L 0.8615883588790894 6.5 L 3.999999761581421 1.007779955863953 L 7.138411045074463 6.5 Z" stroke="none"/>
    <path d="M 3.999999761581421 2.015560150146484 L 1.723176956176758 6 L 6.276822566986084 6 L 3.999999761581421 2.015560150146484 M 3.999999761581421 0 L 8 7 L -4.76837158203125e-07 7 L 3.999999761581421 0 Z" stroke="none" fill="#ee8c8c" />
  </g>

</svg>

Answer 1

我在处理 SVG 图像时遇到了同样的问题，我刚刚上传了一个包来解决这个问题： https://pub.dev/packages/simple_shadow

如果你对代码感兴趣，这里是：

Stack(
  children: <Widget>[
    Transform.translate(
      offset: offset,
      child: ImageFiltered(
        imageFilter: ImageFilter.blur(sigmaY: sigma, sigmaX: sigma),
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(
              color: Colors.transparent,
              width: 0,
            ),
          ),
          child: Opacity(
            opacity: opacity,
            child: ColorFiltered(
              colorFilter: ColorFilter.mode(color, BlendMode.srcATop),
              child: child,
            ),
          ),
        ),
      ),
    ),
    child,
  ],
)

dropShadow用于颤振中的svg路径

1 个答案: