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). enter image description here .

<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

Popular posts from this blog

Android layout hidden on keyboard show -

google app engine - 403 Forbidden POST - Flask WTForms -

c - Why would PK11_GenerateRandom() return an error -8023? -