Замените linearGradient в SVG на jQuery

Я могу удалить строку linearGradient с помощью jQuery в SVG, но не могу добавить ее. Почему?

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/


svg jquery linear-gradients
person Peter    schedule 14.08.2014    source источник
comment
Вы не можете напрямую использовать jQuery для элементов svg.   -  person defghi1977    schedule 15.08.2014
comment
а почему кнопка удалить работает?   -  person Peter    schedule 15.08.2014
comment
Попробуйте $clone = $('svg style, svg linearGradient').clone();, затем SET = $('svg').prepend($clone), проверьте с помощью console.log($clone). $clone — это элемент DOM, а .val() — строка. Вы должны создать элемент DOM из строки HTML   -  person Alvin K.    schedule 15.08.2014
comment
HTMLDOM и SVGDOM частично имеют одинаковый API, но SVGElement не имеет свойства innerHTML, которое jQuery использует, возможно, в методе prepend.   -  person defghi1977    schedule 15.08.2014
comment
@defghi1977 innerHTML в наши дни также доступен для элементов svg, см. stackoverflow.com/a/9826866/109374   -  person Erik Dahlström    schedule 15.08.2014
comment
О, я не знаю эту спецификацию, спасибо!   -  person defghi1977    schedule 15.08.2014

Ответы (1)


arrow_upward
0
arrow_downward

Если вы откроете инспектор, вы увидите, что элемент стиля удалялся, но элемент linearGradient не удалялся. Кроме того, все, начиная с текстовой области, добавлялось к 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)');
person cuth    schedule 15.08.2014