Обрезка SVG с помощью javascript

мы пытаемся использовать clippath для полилинии с помощью javascript. Мы попытались написать пример HTML-кода, который работал нормально:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="parent">
    <clippath id="cut-off-bottom">
        <rect x="0" y="0" width="200" height="100" />
    </clippath>
    <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" />
</svg>

это работает абсолютно нормально.

но когда мы пытаемся создать тот же код с помощью javascript, он не работает:

_svgNS = 'http://www.w3.org/2000/svg';
parent = document.getElementById('parent');

circle = document.createElementNS(_svgNS, 'circle');
circle.setAttributeNS(null, 'cx', '100');
circle.setAttributeNS(null, 'cy', '100');
circle.setAttributeNS(null, 'r', '100');

clippath = document.createElementNS(_svgNS, 'clippath');
clippath.setAttributeNS(null, 'id', 'clip');

r = document.createElementNS(_svgNS, 'rect');
r.setAttributeNS(null, 'x', '0');
r.setAttributeNS(null, 'y', '0');
r.setAttributeNS(null, 'width', '200');
r.setAttributeNS(null, 'height', '100');


clippath.appendChild(r);

circle.setAttributeNS(_svgNS, 'clip-path', 'url(#clip)');
parent.appendChild(clippath);
parent.appendChild(circle);

может ли кто-нибудь помочь нам найти проблему с вышеуказанным кодом...

спасибо заранее.

9
html5 javascript svg

2 ответов

через некоторое время скрипки оказывается, что SVG очень чувствителен к регистру и clippath элемент должен быть clipPath элемент.

см. рабочая скрипка:http://jsfiddle.net/F4mq9/2/

очень странно, что статический образец работал.

16

установить id на <clippath> to clip, но затем вы устанавливаете clip-path="url(#clippath). Вы должны соответствовать установить.

демо:http://jsfiddle.net/uMe4s/7/

Я сжал часть вашего кода (добавляя элемент, как только он был создан, а не в конце). Это не влияет на решение.

1