Svg градиент для группы

Question

Есть svg обертка группа по задумке для того чтобы применять стили на сразу все 5 элементов внутренних групп. Однако радиальный градиент принципиально ен применяется ко всей групп, а применяется в каждом из 5ти по отдельности. Как можно применить ко всем сразу? Что я делаю не так?

<svg width="800" height="100" viewBox="0 0 800 100" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="filter0_i_406_6193" x="0.0524902" y="0" height="41.5858" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB" width="100%">
      <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
      <feOffset></feOffset>
      <feGaussianBlur stdDeviation="1.5"></feGaussianBlur>
      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"></feComposite>
      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.65 0"></feColorMatrix>
      <feBlend mode="normal" in2="shape" result="effect1_innerShadow_406_6193"></feBlend>
    </filter>
    <radialGradient id="paint0_radial_406_6193" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(152 21.0001) rotate(-180) scale(154 1129.33)">
      <stop stop-color="#738898" stop-opacity="0"></stop>
      <stop offset="1" stop-color="#738898"></stop>
    </radialGradient>
    <radialGradient id="paint1_radial_406_6193" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(152) rotate(90) scale(42 520.249)">
      <stop stop-color="#9B8474"></stop>
      <stop offset="1" stop-color="#D5AF71" stop-opacity="0"></stop>
    </radialGradient>
  </defs>

  <g filter="url(#filter0_i_406_6193)" fill-opacity="0.65" fill="url(#paint0_radial_406_6193)">
    <!-- Левый блок с углами -->
    <g transform="translate(0, 0)">
      <path d="M14.9626 2.94761C16.8395 1.06082 19.391 0 22.0523 0H40V40H22.0523C19.391 40 16.8395 38.9392 14.9626 37.0524L1.50763 23.5262C-0.432568 21.5757 -0.432566 18.4243 1.50763 16.4738L14.9626 2.94761Z"></path>
    </g>
    <!-- Ровный участок между левым блоком и центром -->
    <g transform="translate(40, 0)">
      <rect height="40" width="216"></rect>
    </g>
    <!-- Центральный блок -->
    <g transform="translate(256, 0)">
      <path d="M 0 0 H 8 V 40 H 6.4142 C 6.149 40 5.8946 40.1054 5.7071 40.2929 L 4.7071 41.2929 C 4.3166 41.6834 3.6834 41.6834 3.2929 41.2929 L 2.2929 40.2929 C 2.1054 40.1054 1.851 40 1.5858 40 H 0"></path>
    </g>
    <!-- Ровный участок между центром и правым блоком -->
    <g transform="translate(264, 0)">
      <rect height="40" width="216"></rect>
    </g>
    <!-- Правый блок с углами -->
    <g transform="translate(480, 0)">
      <path d="M0 0H17.948C20.609 0 23.1605 1.06082 25.0374 2.94761L38.4924 16.4738C40.4326 18.4243 40.4326 21.5757 38.4924 23.5262L25.0374 37.0524C23.1605 38.9392 20.609 40 17.948 40H0V0Z"></path>
    </g>
  </g>
</svg>

Answer 1

Каждая трансформация у отдельно взятой группы создаёт свой контекст для градиента.

Для того, чтобы этого избежать, необходимо перенести трансформации непосредственно в атрибуты элемента (возможно потребуется пересчёт или конвертация). Например:

<!-- До -->
<g transform="translate(40, 0)">
  <rect height="40" width="216"/>
</g>
<g transform="translate(256, 0)">
  <path d="M 0 0 h 8 v 40 H 6 l -1 1 H 3 l -1 -1 H 0"/>
</g>

<!-- После -->
<g>
  <rect x="40" y="0" height="40" width="216"/>
</g>
<g>
  <path d="M 256 0 h 8 v 40 h -2 l -1 1 h -2 l -1 -1 h -2"/>
</g>

Тогда получим желаемый эффект:

<svg width="800" height="100" viewBox="0 0 800 100" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="filter0_i_406_6193" x=".1" y="0" height="41.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB" width="100%">
      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
      <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
      <feOffset/>
      <feGaussianBlur stdDeviation="1.5"/>
      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.65 0"/>
      <feBlend in2="shape" result="effect1_innerShadow_406_6193"/>
    </filter>
    <radialGradient id="paint0_radial_406_6193" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(260 21.0001) rotate(-180) scale(154 1129.33)">
      <stop stop-color="#738898" stop-opacity="0"/>
      <stop offset="1" stop-color="#738898"/>
    </radialGradient>
  </defs>
  <g filter="url(#filter0_i_406_6193)" fill-opacity=".7" fill="url(#paint0_radial_406_6193)">
    <!--Левый блок с углами-->
    <g>
      <path d="M15 3c2-2 4-3 7-3h18v40H22c-3 0-5-1-7-3L2 24c-2-2-2-6 0-8L15 3Z" />
    </g>
    <!--Ровный участок между левым блоком и центром-->
    <g>
      <rect x="40" y="0" height="40" width="216" />
    </g>
    <!--Центральный блок-->
    <g>
      <path d="M256 0h8v40h-2l-1 1h-2l-1-1h-2" />
    </g>
    <!--Ровный участок между центром и правым блоком-->
    <g>
      <rect x="264" y="0" height="40" width="216" />
    </g>
    <!--Правый блок с углами-->
    <g>
      <path d="M480 0h18c3 0 5 1 7 3l13 13c2 2 2 6 0 8l-13 13c-2 2-4 3-7 3h-18V0Z" />
    </g>
  </g>
</svg>

Не знаю, зачем Вам каждая фигура в своей группе, но если ещё сократить...

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 800 100">
  <defs>
    <radialGradient id="a" cx="0" cy="0" r="1" gradientTransform="matrix(-154 0 0 -1129.33 260 21)" gradientUnits="userSpaceOnUse">
      <stop stop-color="#738898" stop-opacity="0"/>
      <stop offset="1" stop-color="#738898"/>
    </radialGradient>
    <filter id="b" width="100%" height="41.6" x="0" y="0" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
      <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
      <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
      <feOffset/>
      <feGaussianBlur stdDeviation="1.5"/>
      <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.65 0"/>
      <feBlend in2="shape" result="effect1_innerShadow_406_6193"/>
    </filter>
  </defs>
  <g fill="url(#a)" fill-opacity=".7" filter="url(#b)">
    <path d="M15 3c2-2 4-3 7-3h18v40H22c-3 0-5-1-7-3L2 24c-2-2-2-6 0-8L15 3Zm25-3h216v40H40zm216 0h8v40h-2l-1 1h-2l-1-1h-2m8-40h216v40H264zm216 0h18c3 0 5 1 7 3l13 13c2 2 2 6 0 8l-13 13c-2 2-4 3-7 3h-18V0Z"/>
  </g>
</svg>

Также рекомендую указывать в абсолютном значении только начала путей (M), для остальных точек желательны относительные значения (c, q, a, l, h...). Так будет легче двигать фигуру не затрагивая её размеры и изменяя только начало координат.

БЛОГ НА HUSL

Svg градиент для группы

Ответы (1 шт):