Chrome SVG non-scaling-stroke bug
HTML
<svg width="300" height="300">
<g id="g-css">
<text x="0" y="50" font-size="36">Hello</text>
<line x1="0" y1="70" x2="200" y2="70" />
<path d="M0,60 q75,40 150,0" />
</g>
<g id="g-attr" transform="scale(2 2) translate(0 60)">
<text x="0" y="50" stroke="blue" stroke-width="2" fill="none" vector-effect="non-scaling-stroke" font-size="36">Hello</text>
<line x1="0" y1="70" x2="200" y2="70" stroke="blue" stroke-width="2" vector-effect="non-scaling-stroke" />
<path d="M0,60 q75,40 150,0" stroke="blue" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" />
</g>
</svg>
CSS
#g-css {
transform: scale(2, 2);
-webkit-transform: scale(2, 2);
-moz-transform: scale(2, 2);
}
#g-css * {
stroke:red;
stroke-width:2;
fill:none;
vector-effect:non-scaling-stroke;
}