SVG 上的挤压效果

Question

我正在尝试在现有 svg 文件上创建带有阴影的挤压效果。

我的做法是，一方面保留未更改的文件，另一方面将其用作另一个文件的源，我希望仅通过掩码即可达到效果。 这样做应该允许我在许多 svg 文件上重复使用这个效果，如果需要的话应用另一个效果和/或组合效果而不改变源文件。

example.svg（来源）：

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 5 5" stroke-width="2">
<path stroke="#000" d="m0,1h5"/>
<path stroke="#444" d="m0,2h5"/>
<path stroke="#888" d="m0,3h5"/>
<path stroke="#CCC" d="m0,4h5"/>
<path stroke="#FFF" d="m0,5h5"/>
</svg>

extruded.svg（具有挤压效果的容器）：

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
<mask id="extrusion">
<!-- Mask definition to be replaced -->
<rect x="0" y="0" width="400" height="400" fill="white" />
</mask>
<image href="example.svg" mask="url(#extrusion)"/>
</svg>

作为参考，这是原始文件和我想要实现的效果（挤出+阴影）的并排插图。

可以吗？

Answer 1

有这样的事吗？

<svg xmlns='http://www.w3.org/2000/svg' viewBox='80 0 480 480'>
  <defs>
    <clipPath id='clip'>
      <path fill='#000' id='none' d='m430 31a122 122 0 0 0-111 69 122 122 0 0 0-233 52c0 128 233 297 233 297s233-169 233-297a122 122 0 0 0-122-122' transform='' />
    </clipPath>
  </defs>
  <filter id='ff'>
    <feGaussianBlur in='SourceAlpha' stdDeviation='4' result='f'></feGaussianBlur>
    <feOffset dy='4' dx='4'></feOffset>
    <feComposite in2='f' operator='arithmetic' k2='-1' k3='1' result='a'></feComposite>
    <feFlood flood-color='#ddd'></feFlood>
    <feComposite in2='a' operator='in'></feComposite>
    <feComposite in2='SourceGraphic' result='b' operator='over'></feComposite>
    <feGaussianBlur in='b' stdDeviation='4'></feGaussianBlur>
    <feOffset dy='-8' dx='-8'></feOffset>
    <feComposite in2='b' operator='arithmetic' k2='-1' k3='1' result='c'></feComposite>
    <feFlood flood-color='#333'></feFlood>
    <feComposite in2='c' operator='in'></feComposite>
    <feComposite in2='b' operator='over' result='d'></feComposite>
    <feSpecularLighting result='e' in='d' specularExponent='15' lighting-color='transparent'>
      <fePointLight x='320' y='240' z='70' />
    </feSpecularLighting>
    <feComposite in2='e' in='d' operator='arithmetic' k1='0' k2='1' k3='1' k4='0' />
  </filter>
  <g filter='url(#ff)'>
    <g clip-path='url(#clip)' transform=''>
      <path fill='#e70000' id='none' d='M0 0h640v80H0' transform='' />
      <path fill='#ff8c00' id='none' d='M0 80h640v80H0' transform='' />
      <path fill='#ffef00' id='none' d='M0 160h640v80H0' transform='' />
      <path fill='#00811f' id='none' d='M0 240h640v80H0' transform='' />
      <path fill='#0044ff' id='none' d='M0 320h640v80H0' transform='' />
      <path fill='#760089' id='none' d='M0 400h640v80H0' transform='' />
    </g>
  </g>
</svg>