在svg <path>上添加阴影开发者社区

文章/答案/技术大牛

发布

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 162 63.25">
  <g style="isolation:isolate">
        <path d="M149.376,39.75l-49,23.5v-47Z" fill="#811818"/>
        <path d="M149.376,39.75H6.688L30.279,22.274,6.624,4.75H149.376Z" fill="#b51c1c"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 162 63.25">
  <g style="isolation:isolate">
        <filter id="dropshadow" x="-2" y="-2" width="200" height="200">
          <feGaussianBlur stdDeviation="1"/>
        </filter>
        <path d="M149.376,39.75l-49,23.5v-47Z" fill="#811818"/>
        <path style="stroke: rgba(0,0,0,0.19); stroke-width: 0.2; filter: url('#dropshadow');" d="M149.376,39.75H6.688L30.279,22.274,6.624,4.75H149.376Z" fill="#b51c1c"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 169 67.25">
  <g style="isolation:isolate">
          <filter id="dropshadow" height="122%">
            <feGaussianBlur in="SourceAlpha" stdDeviation="1" /> 
            <feOffset in="blur" dx="0.7" dy="0.7" result="offsetBlur"/>
            <feOffset dx="1" dy="1" result="offsetblur" />
            <feFlood flood-color="#3D4574" flood-opacity="0.3" result="offsetColor"/>
            <feComposite in="offsetColor" in2="offsetBlur" operator="in" result="offsetBlur"/>
          </filter>
        </defs>
        <use xlink:href="#path1" filter="url(#dropshadow)"></use>
        <path id="path1" d="M149.376,39.75l-49,23.5v-47Z" fill="#811818"/>
        <use xlink:href="#path2" filter="url(#dropshadow)"></use>

问 在svg <path>上添加阴影 EN

Stack Overflow用户