html - 无法在 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 文件。您缺少 namespace 中的 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>