Не удается отобразить линейный градиент в качестве фонового изображения на HTML-странице

Question

<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>

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

Answer 1

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

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

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

• вы не можете сделать линейный градиент дочерним по отношению к тегу <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>

Answer 2

Вы должны использовать 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>