Как мне заполнить несколько путей SVG одним градиентом? - PullRequest
Новая
       7

Как мне заполнить несколько путей SVG одним градиентом?

0 голосов
/ 01 ноября 2018

Есть пример с группой из двух путей, группа заполнена градиентом. 

<svg height="1000" width="1400">
    <defs>
      <linearGradient id="lingrad" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" stop-color="red" />
        <stop offset="100%" stop-color="green" />
      </linearGradient>
    </defs>

    <g fill="url(#lingrad)">
      <path d="M501.333,490.667H10.667C4.779,490.667,0,495.445,0,501.333C0,507.221,4.779,512,10.667,512h490.667
        c5.888,0,10.667-4.779,10.667-10.667C512,495.445,507.221,490.667,501.333,490.667z"/>

      <path d="M96,362.667H32c-5.888,0-10.667,4.779-10.667,10.667v128C21.333,507.221,26.112,512,32,512h64
        c5.888,0,10.667-4.779,10.667-10.667v-128C106.667,367.445,101.888,362.667,96,362.667z M85.333,490.667H42.667V384h42.667
        V490.667z"/>
    </g>
  </svg>

Но каждый путь заполнен своим собственным градиентом.

Как мне заполнить все пути одним общим градиентом?

Ответы [ 2 ]

0 голосов
/ 01 ноября 2018

Определите размеры градиента не относительно ограничивающего прямоугольника объекта (для отдельных фигур, gradientUnits="objectBoundingBox" по умолчанию), но относительно локальной системы координат элемента <g> (gradientUnits="userSpaceOnUse"). 

<svg height="1000" width="1400">
    <defs>
      <linearGradient id="lingrad" x1="0" y1="0" x2="512" y2="0" gradientUnits="userSpaceOnUse">
        <stop offset="0%" stop-color="red" />
        <stop offset="100%" stop-color="green" />
      </linearGradient>
    </defs>

    <g fill="url(#lingrad)">
      <path d="M501.333,490.667H10.667C4.779,490.667,0,495.445,0,501.333C0,507.221,4.779,512,10.667,512h490.667
        c5.888,0,10.667-4.779,10.667-10.667C512,495.445,507.221,490.667,501.333,490.667z"/>

      <path d="M96,362.667H32c-5.888,0-10.667,4.779-10.667,10.667v128C21.333,507.221,26.112,512,32,512h64
        c5.888,0,10.667-4.779,10.667-10.667v-128C106.667,367.445,101.888,362.667,96,362.667z M85.333,490.667H42.667V384h42.667
        V490.667z"/>
    </g>
  </svg>
0 голосов
/ 01 ноября 2018

Путем создания одного пути.
Просто добавьте тег d одного пути к тегу d другого пути: 

<path d="M501.333,490.667H10.667C4.779,490.667,0,495.445,0,501.333C0,507.221,4.779,512,10.667,512h490.667
        c5.888,0,10.667-4.779,10.667-10.667C512,495.445,507.221,490.667,501.333,490.667z"/>

<path d="M96,362.667H32c-5.888,0-10.667,4.779-10.667,10.667v128C21.333,507.221,26.112,512,32,512h64
        c5.888,0,10.667-4.779,10.667-10.667v-128C106.667,367.445,101.888,362.667,96,362.667z M85.333,490.667H42.667V384h42.667
        V490.667z"/>


<svg height="1000" width="1400">
  <defs>
    <linearGradient id="lingrad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="green" />
    </linearGradient>
  </defs>

    <g fill="url(#lingrad)">
        <path d="M501.333,490.667H10.667C4.779,490.667,0,495.445,0,501.333C0,507.221,4.779,512,10.667,512h490.667
            c5.888,0,10.667-4.779,10.667-10.667C512,495.445,507.221,490.667,501.333,490.667zM96,362.667H32c-5.888,0-10.667,4.779-10.667,10.667v128C21.333,507.221,26.112,512,32,512h64
            c5.888,0,10.667-4.779,10.667-10.667v-128C106.667,367.445,101.888,362.667,96,362.667z M85.333,490.667H42.667V384h42.667
            V490.667z"/>
    </g>
</svg>
...