CODEWITHSUNDEEP
javascripthtmlsvg
VKS
VKS

Reputation: 277

SVG clipping using javascript

We are trying to use clippath for polyline using javascript. We tried writing a sample HTML code which worked fine:

<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>

This works absolutely fine.

But when we try to generate the same code using javascript it doesn't work:

_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);

Can anyone please help us find the issue with the above code...

Thanks in advance.

Upvotes: 11

Views: 8436

Answers (3)

MRoeling
MRoeling

Reputation: 78

Old question, however the fix was not mentioned in the approved fix. The reason it did not work was because of the namespace on the clippath attribute. Like in the jsfiddle, the namespace url should be set to null.

Upvotes: 0

Gigo
Gigo

Reputation: 3264

After a while of fiddling it turns out that SVG is very case-sensitive and the clippath element needs to be a clipPath element.

See working fiddle: http://jsfiddle.net/F4mq9/2/

Very strange that the static sample worked however.

Upvotes: 21

Phrogz
Phrogz

Reputation: 303205

You set the id of the <clippath> to clip, but then you set the clip-path="url(#clippath). You need to match the id attribute you set.

Demo: http://jsfiddle.net/uMe4s/7/

I've tersified some of your code (appending the element as soon as it was created, instead of at the end). This has no effect on the solution.

Upvotes: 2

Related Questions