<svg version="1.1" xmlns="http://w3.org/2000/svg">
    	<title> Background </title>
    	<text>
    		<LinearGradient id="g" x1="200%" x2="0%" y1="50%" y2="0%">
    		<stop style = "stop-color: green;" offset="0"/>
    		<stop style = "stop-color: white;" offset="1"/>
    		</LinearGradient>
    	</text>
    	<rect style = "fill: url(#g);" width = "100%" height = "100%"/>
    </svg>

Результатом этого кода является либо сломанное изображение, либо заголовок «Фон», и я не вижу, что с ним не так.

1
Brandon Burchett 15 Сен 2018 в 00:16

2 ответа

Лучший ответ

У вас есть две проблемы, которые влияют только на автономный SVG

  • пространство имен SVG неверно, поэтому файл не распознается как файл SVG. Вам не хватает www в пространстве имен.
  • автономные файлы SVG чувствительны к регистру, поэтому нам нужно написать linearGradient

И это ошибка, даже когда вы встраиваете SVG в html.

  • вы не можете сделать linearGradient дочерним элементом тега <text>. Вместо этого мы можем использовать <defs>. Теоретически мы могли бы опустить тег <defs>, хотя я думаю, что Safari это не нравится.

Что оставляет нам это ...

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <title> Background </title>
    <defs>
        <linearGradient id="g" x1="200%" x2="0%" y1="50%" y2="0%">
        <stop style = "stop-color: green;" offset="0"/>
        <stop style = "stop-color: white;" offset="1"/>
        </linearGradient>
    </defs>
    <rect style = "fill: url(#g);" width = "100%" height = "100%"/>
</svg>
1
Robert Longson 15 Сен 2018 в 03:27

Вы должны использовать defs для градиента. Вы также можете рассмотреть окно просмотра и ширину / высоту:

<svg version="1.1" xmlns="http://w3.org/2000/svg" viewBox="0 0 200 100" width="200">
    <title> Background </title>
    <defs>
        <LinearGradient id="g" x1="200%" x2="0%" y1="50%" y2="0%">
        <stop style = "stop-color: green;" offset="0"/>
        <stop style = "stop-color: white;" offset="1"/>
        </LinearGradient>
    </defs>
    <rect fill="url(#g)" x="0" y="0" width="200" height="100" />
</svg>
0
Temani Afif 14 Сен 2018 в 21:30