RE: Set circle radius using CSS

Hi, hemebond-

hemebond wrote:
| 
| I hope this is the correct place to ask this. I've been 
| through the spec and I can not find a way to change the size 
| of a circle element with CSS. How do I do this?

A better place to ask is at svg-developers@yahooogroups.com, which is a
forum for questions about authoring SVG. This is the place to talk about the
Spec itself.

To answer your question, you cannot do what you are trying to. CSS can only
affect what are called the style properties of an element, such as fill
color, stroke color, stroke width, opacity, etc. It cannot affect the
geometry of an element. This also extends to the inheritance of such
attributes; to wit, an element cannot inherit position or shape information
(radius, height, width, etc.) from a parent element. It would be cool if you
could do this, but it's not currently possible.

Moreover, I would personally discourage you from using CSS with SVG at all,
if you can help it. CSS is not required for an implementation, it's not used
on mobile devices typically, and you can do the same thing with straight
attributes.

All that being said, here's a lousy, klugey, ugly workaround, if you're
interested. If you don't care about having a stroke, simply make a very
small circle, set the stroke to the same color as the fill, and set the
stroke-width to roughly double what you want the radius to be. It will
appear to be a circle the size you've specified. It's not foolproof, but it
might help you.

<svg>
<circle cx='25' cy='25' r='20' fill='orange' stroke='orange'/>
<circle cx='75' cy='25' r='5' stroke-width='31' fill='orange'
stroke='orange'/>
<circle cx='75' cy='25' r='5' fill='red'/>
<svg>

Regards-
Doug

doug . schepers  @ vectoreal.com
www.vectoreal.com ...for scalable solutions.

Received on Wednesday, 14 September 2005 05:12:38 UTC