0

在 Chrome 中，如果我通过 javascript 向 SVG 元素添加属性，并且它包含大写字母，那么按属性 CSS 规则将不匹配它。

但是无论大小写，相同的规则都会匹配文档上的属性！

在 IE9 中匹配 CSS，规则使用属性的大小写。

这是一个错误吗？我认为属性匹配应该不区分大小写？

在此处输入图像描述

http://jsfiddle.net/adrianjmartin/NJej8/6/

HTML 

    <circle cx="100" cy="100" r="25" Foo />
    <circle cx="200" cy="100" r="25" foo />

     <text x="20" y="20">Chrome: wont select css by attribute, if setAttribute used a capital letter</text>
    <text x="20" y="50">Document: css match is case insensitive.</text>
    <text x="20" y="150">JS Added Circles: setAttribute("Foo") won't match, </text>
    <text x="20" y="180">JS Added Circles: setAttribute("foo") does match! </text>


     <text x="20" y="350">In IE9, css attribute match is case sensitive </text>


</svg>
</body>

CSS

svg{ background:palegoldenrod }
circle{ fill:red }
circle[Foo]{ fill:yellow }
circle[foo]{ fill:green }

/* Foo is captilised */

JAVASCRIPT：

var svg = document.querySelector("svg");
var c1 = document.createElementNS( svg.namespaceURI ,"circle");
c1.setAttribute("cx","100");
c1.setAttribute("cy","230");
c1.setAttribute("r","25"); c1.setAttribute("Foo");
svg.appendChild(c1);

var c2 = document.createElementNS( svg.namespaceURI ,"circle"); 
c2.setAttribute("cx","200");
c2.setAttribute("cy","230");
c2.setAttribute("r","25");
c2.setAttribute("foo");
svg.appendChild(c2);
4

0 回答 0