SVG背景不适用

我做了一个简单的SVG图像，但背景不适用，而应该使用。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"> 
    <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>

的path是黑色的，但它应该是一个梯度会从白色到橙色。

显然，当我在jsfiddle中运行我的代码时，它显示出良好的结果。但是当我尝试在img标签中显示SVG或直接在浏览器中显示时，我得到了黑色背景。任何想法？

我做错了什么或这是一个常见问题？

感谢您的帮助。

来源

2014-02-26 Manitoba

我认为这个问题是在这里：

<lineargradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">

修正：

<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">

来源

2014-02-26 09:02:59

它并没有解决我的问题：http://i.imgur.com/seDJ6JA.png – Manitoba

我期望得到：http://i.imgur.com/XKj1YkY.png – Manitoba

显然，当我在jsfiddle中运行我的代码时，它显示出良好的结果。但是当我尝试在img标签中显示SVG或直接在浏览器中显示时，我得到了黑色背景。任何想法？ – Manitoba

SVG背景不适用

回答

相关问题