用 jQuery 替换 SVG 中的 linearGradient答案

【问题标题】：Replace the linearGradient in a SVG with jQuery用 jQuery 替换 SVG 中的 linearGradient
【发布时间】：2014-08-14 23:41:14
【问题描述】：

我可以在 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>

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

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

【问题讨论】：

你不能直接将jQuery用于svg元素。
但是为什么删除按钮会起作用？
尝试$clone = $('svg style, svg linearGradient').clone();，然后SET = $('svg').prepend($clone)，检查console.log($clone)。 $clone 是一个 DOM 元素，而 .val() 是一个字符串。你必须create DOM element from HTML string
HTMLDOM 和 SVGDOM 部分具有相同的 api，但 SVGElement 可能没有 jQuery 在 prepend 方法中使用的 innerHTML 属性。
@defghi1977 innerHTML 现在也可用于 svg 元素，请参阅 stackoverflow.com/a/9826866/109374

标签： jquery svg linear-gradients

【解决方案1】：

如果你打开检查器，你会看到 style 元素被移除了，但 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)');

【讨论】：