Как внешне контролировать ход SVG паттерна - PullRequest
Новая
       67

Как внешне контролировать ход SVG паттерна

1 голос
/ 09 марта 2020 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 192 96" height="480" fill="none" stroke="#000">
  <defs>
     <linearGradient id="gradInner" gradientUnits="userSpaceOnUse">
      <stop stop-color="#070" offset="0"/>
      <stop stop-color="#007" offset="1"/>
     </linearGradient>

    <g id="shape-s">
      <path d="M48,4.5 H4.5 V43.5 H48"/>
      <path d="M48,9 H24 A15,15 0 0,0 24,39 H48" stroke-width="2"/>
    </g>
    <pattern id="shape-m" width="48" height="48" patternUnits="userSpaceOnUse">
      <path d="M0,4.5H48M0,43.5H48"/>
      <path d="M0,9H48M0,39H48" stroke-width="2"/>
    </pattern>
    <g id="shape-e">
      <path d="M 0,4.5 H43.5 V43.5 H0"/>
      <path d="M 0,9 H24 A15,15 0 0,1 24,39 H0" stroke-width="2"/>
    </g>
    <g id="shape">
      <rect  fill="url(#shape-m)" stroke="none" x="48" width="48" height="48"/>
      <use xlink:href="#shape-s"></use>
      <use xlink:href="#shape-e" x="96"></use>
    </g>
  </defs>
  <g stroke="url(#gradInner)">
    <path d="M48,4.5 H4.5 V43.5 H48"/>
    <path d="M48,4.5H96M48,43.5H96"/>
    <path d="M96,4.5 h43.5 v39 H96"/>
    <path d="M48,9 H24 A15,15 0 0,0 24,39 H48" stroke-width="2"/>
    <path d="M48,9H96M48,39H96" stroke-width="2"/>
    <path d="M96,9 h24 a15,15 0 0,1 0,30 H96" stroke-width="2"/>
  </g>
  <use xlink:href="#shape" y="48" stroke="url(#gradInner)"/>
</svg>

Я думаю, что это невозможно, но я хочу найти здесь 1022 * решение, прежде чем я добавлю полотенце. Я создаю <use> элементов с динамической c шириной в JavaScript. Я делаю это, группируя 3 элемента: начало / слева, середина, конец / право. Начальный элемент всегда одинаков. Конечный элемент - это позиции по атрибуту x <use>. Средний элемент - это <rect>, заполненный <pattern> url.

Шаблон был единственным способом, которым я мог видеть, чтобы быть действительно динамическими c по ширине и поддерживать любую форму. Но шаблоны также имеют серьезные ограничения. Первая проблема заключается в том, что <rect>, использующий шаблон, не должен иметь своего собственного штриха. Большая проблема в том, что я не могу управлять штрихом от элемента <use>, я должен установить атрибут stroke для самого элемента <pattern>. (конечно, те же ограничения применяются к заливке как штрих)

Есть ли другое решение для этого? Я хочу иметь возможность применить градиент к элементу <use> в целом. Шаблон не позволяет этого. Я могу обойти это, но это неуклюже, и я бы не хотел. Есть ли другое решение для динамической c ширины, которое отвечает моим потребностям?

...