Question

我可以在SVG中使用jQuery删除linearGradient行，但我无法添加它。为什么？

HTML

<textarea>
<linearGradient y2="1" x2="1" id="g" spreadMethod="reflect">
<stop stop-color="#F00" offset="0"/>
<stop stop-color="#F0F" offset="1"/>
</linearGradient>
<style type="text/css" >
<![CDATA[
    path {  stroke: #009900;  
            stroke-width: 0.1;  
            fill:url(#g);}
]]>
</style>
</textarea>

JS

$('#remove').click(function()
{
    $('svg style, svg linearGradient').remove(); 
});
$('#set').click(function()
{
    $('svg').prepend($('textarea').val());       
});

小提琴 http://jsfiddle.net/qt2ony7v/

Answer 1

如果打开检查器，您将看到样式元素被删除但未删除linearGradient元素。此外，来自textarea的所有内容都被添加到SVG中，但CSS没有生效。

相反尝试这种方法：

http://jsfiddle.net/qt2ony7v/1/

在那个小提琴中，我没有使用样式元素，而是使用g元素将样式应用于所有路径。

<g id="group" stroke="#009900" stroke-width="0.1" fill="url(#g)">
    <path />
    <path />
</g>

然后使用jQuery更改属性：

$('#group').attr('fill', 'url(#g)');

用jQuery替换SVG中的linearGradient

1 个答案: