1019952 - Dynamically added SVG elements can't be used in CSS rules

Status: RESOLVED INVALID

(Firefox :: Untriaged, defect)

Description

[warcraftthreeft]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:29.0) Gecko/20100101 Firefox/29.0 (Beta/Release)
Build ID: 20140506152807

Steps to reproduce:

I dynamically added an svg clip path to an SVG tag then attempted to apply it to an element.

Here's a JS fiddle:

http://jsfiddle.net/5sPuQ/2/

HTML:
<div id="test1"></div>
<div id="test2"></div>
<svg>
    <defs id="clippaths">
        <clipPath id="test1blinds" clipPathUnits="objectBoundingBox">
            <polygon points='0 0, 1 0, 1 1, 0 1' />
            <animateTransform attributeName="transform" begin="0s" dur="1s" type="translate" by="100,0" />
        </clipPath>
    </defs>
</svg>

CSS:
div { width: 100px; height: 100px; }
#test1
{
    background-color: #f00;
    clip-path: url(#test1blinds);
}
#test2
{
    background-color: #00f;
}

JS:
$(document).ready(function()
{
    $("#test2blinds").remove();
	var blindsleft = "<polygon points='0 0, 1 0, 1 1, 0 1' />";
	blindsleft += '<animateTransform attributeName="transform" begin="0s" dur="1s" type="translate" by="100,0" />';
	blindsleft = '<clipPath id="test2blinds" clipPathUnits="objectBoundingBox">' + blindsleft + '</clipPath>';
	$("#clippaths").append(blindsleft);
    $("#test2").css("clip-path", "url(#test2blinds)");
});


Actual results:

This does nothing as if the id doesn't exist for the CSS rule to use.


Expected results:

That the clip path should be accessible to the CSS rule. In my jsfiddle example I have a clip path added to the page on load which works fine for the red box. The blue box should function identically.

Comment 1

[warcraftthreeft]

http://jsfiddle.net/5sPuQ/3/

I'm slow apparently. Never knew SVG was in its own namespace. This is apparently critical to working with SVG. So yeah if anyone else runs into this then the solution is to use the SVG namespace and not the HTML one.