未应用SVG背景
我已经制作了一个简单的SVG图像,但是没有应用背景,而应该应用背景 到目前为止,我获得了以下代码:未应用SVG背景,svg,background,gradient,Svg,Background,Gradient,我已经制作了一个简单的SVG图像,但是没有应用背景,而应该应用背景 到目前为止,我获得了以下代码: <?xml version="1.0" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg" id="content" width="100%" height="100%" viewbox="0 0 800 1000" preserveaspectratio="xMidYMid meet" version="1.1"
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" id="content" width="100%" height="100%" viewbox="0 0 800 1000" preserveaspectratio="xMidYMid meet" version="1.1">
<defs>
<lineargradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
<stop offset="100%" stop-color="orange" stop-opacity="0.8"/>
</lineargradient>
<lineargradient id="gradientLine" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="orange" stop-opacity="0"/>
<stop offset="100%" stop-color="orange" stop-opacity="0.6"/>
</lineargradient>
</defs>
<g id="vis" transform="translate(330,670)">
<path fill="url(#gradient)" d="M-112.87131548350527,-640.1250394579351A650,650 0 0,1 222.31309316168483,-610.8002035108404L0,0Z"/>
<circle r="35" stroke="orange" fill="orange" opacity="1"/>
<circle r="3" stroke="black" fill="black" opacity="1"/>
<line x1="0" x2="-85" y1="0" y2="0" fill="black" stroke="black"/>
</g>
</svg>
路径为黑色,但应该是从白色到橙色的渐变
显然,当我在JSFIDLE中运行代码时,它显示了良好的结果。但是,当我试图在img标记中或直接在浏览器中显示SVG时,我得到了一个黑色背景。有什么想法吗 是我做错了什么,还是这是一个普遍的问题
谢谢你的帮助。我想问题出在这里:
<lineargradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
固定的:
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
显然,当我在JSFIDLE中运行代码时,它显示了良好的结果。但是,当我试图在img标记中或直接在浏览器中显示SVG时,我得到了一个黑色背景。知道吗?我发现了你的错误-是lineargradient而不是lineargradient