css - SVG - circles with stroke-width are not filled in chrome -
i trying draw circles in svg different results in chrome/opera , ie/firefox.
attached image shows how circles drawn in chrome (left) , in firefox (right). .
<svg> <style> .circle { fill: #00ff00; stroke: #00ff00; stroke-width: 18px; } </style> <circle class="circle" cy="45" cx="390" r="1" /> </svg>
is there way how force chrome fill circles firefox?
note: know correct solutions lies in "r" attribute, want draw circles width "stroke-width" attribute, because can set css. in app, there lot of circles , need change size , change css attribute more faster change "r" attribute of each circle in loop.
it's not in firefox, albeit in different way, e.g. partial arc:
<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg"> <style> path { fill: green; stroke: green; stroke-width: 128; stroke-opacity: 0.5; stroke: url(#mygradient); } </style> <defs> <lineargradient id="mygradient"> <stop offset="25%" stop-color="red"></stop> <stop offset="75%" stop-color="blue"></stop> </lineargradient> </defs> <path d="m84,62 a21,21 0 1,0 28,0"></path> </svg>
Comments
Post a Comment