Линейные градиенты в SVG без определений - PullRequest
Новая
       46

Линейные градиенты в SVG без определений

8 голосов
/ 30 сентября 2011

Я могу использовать линейный градиент в SVG с разделом defs, например: 

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
    <linearGradient id="myLinearGradient1"
                    x1="0%" y1="0%"
                    x2="0%" y2="100%"
                    spreadMethod="pad">
      <stop offset="0%"   stop-color="#00cc00" stop-opacity="1"/>
      <stop offset="100%" stop-color="#006600" stop-opacity="1"/>
    </linearGradient>
  </defs>

  <rect x="0" y="0" width="100" height="100"
     style="fill:url(#myLinearGradient1)" />

</svg>

Могу ли я использовать линейный градиент без раздела defs?Я нахожу что-то вроде этого: 

<rect style="fill:lineargradient(foo)">

Ответы [ 2 ]

3 голосов
/ 08 октября 2011

<defs> требуется только для целей структурирования, элементы в нем не отображаются, но поскольку градиент может быть виден только при применении к фигуре или другому элементу, его можно определить в любом месте документа.

Но вы все равно должны придерживаться правильного синтаксиса: 

<rect style="fill:url(#myLinearGradient1)" ... />
0 голосов
/ 09 февраля 2019

Да, вы действительно можете иметь градиент без необходимости иметь элемент defs;вместо этого вы просто помещаете элемент градиента в другое место кода, например, так: 

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

  <linearGradient id="myLinearGradient1"
                x1="0%" y1="0%"
                x2="0%" y2="100%"
                spreadMethod="pad">
    <stop offset="0%"   stop-color="#00cc00" stop-opacity="1"/>
    <stop offset="100%" stop-color="#006600" stop-opacity="1"/>
  </linearGradient>

  <rect x="0" y="0" width="100" height="100"
     style="fill:url(#myLinearGradient1)" />

</svg>
...