Problem with style.getPropertyValue and CSS

Sascha Ziemann

unread,

Apr 30, 2008, 12:04:57 PM4/30/08

to

Hi,

when I define a symbol with a rectangle, I can not place the rectangle
a the coordinates (0,0) if the rectangle has a border. If I do so the
border gets clipped and I can see only the half of the border.
Therefore I have to place the rectangle at an offset with is half of
the stroke-width of the rectangle.

My problem is, that I can not read the stroke-width property with the
style.getPropertyValue function, if I place the style definition an a
CSS file and assign the style via the class attribute. When I put the
style attribute directly in the SVG file, the getPropertyValue und
setProperty functions work as expected.

Any idea, how to put the style definitions in an external CSS file and
still be able to query them from JavaScript?

Regards
Sascha

Boris Zbarsky

unread,

Apr 30, 2008, 12:50:43 PM4/30/08

to

Sascha Ziemann wrote:
> Any idea, how to put the style definitions in an external CSS file and
> still be able to query them from JavaScript?

Use getComputedStyle?

-Boris

Sascha Ziemann

unread,

Apr 30, 2008, 4:12:28 PM4/30/08

to

This is what Firebug thinks.

The rect with the id "frame" is with the class "dialog_window"
defined, which renders the rect in some nice color (fill is set to
"#EEE"):

>>> document.getElementById("frame")
<rect id="frame" class="dialog_window" x="1" y="1" width="300"
height="200" rx="5" ry="5">

But when I call the function you suggest, I get an empty string:

>>> document.defaultView.getComputedStyle(document.getElementById("frame"), null).getPropertyValue ('fill');
""

Regards
Sascha

Boris Zbarsky

unread,

Apr 30, 2008, 7:28:58 PM4/30/08

to

Sascha Ziemann wrote:
>>>> document.getElementById("frame")
> <rect id="frame" class="dialog_window" x="1" y="1" width="300"
> height="200" rx="5" ry="5">
>
> But when I call the function you suggest, I get an empty string:
>
>>>> document.defaultView.getComputedStyle(document.getElementById("frame"), null).getPropertyValue ('fill');
> ""

Are you perchance using Firefox 2?

-Boris

Robert Longson

unread,

May 1, 2008, 2:58:56 AM5/1/08

to

On Apr 30, 5:04 pm, Sascha Ziemann <cev...@googlemail.com> wrote:
> Hi,
>
> when I define a symbol with a rectangle, I can not place the rectangle
> a the coordinates (0,0) if the rectangle has a border. If I do so the
> border gets clipped and I can see only the half of the border.
> Therefore I have to place the rectangle at an offset with is half of
> the stroke-width of the rectangle.

Why not turn clipping off then using overflow="visible"?

Best regards

Robert

Sascha Ziemann

unread,

May 1, 2008, 4:25:42 AM5/1/08

to

2.0.0.14

Regards
Sascha

Sascha Ziemann

unread,

May 1, 2008, 4:27:16 AM5/1/08

to

On 1 Mai, 06:58, Robert Longson <longs...@gmail.com> wrote:
>
> > when I define a symbol with a rectangle, I can not place the rectangle
> > a the coordinates (0,0) if the rectangle has a border. If I do so the
> > border gets clipped and I can see only the half of the border.
> > Therefore I have to place the rectangle at an offset with is half of
> > the stroke-width of the rectangle.
>
> Why not turn clipping off then using overflow="visible"?

Maybe another approach but no solution to the problem to read style
attributes. ;-)

Regards
Sascha

Robert Longson

unread,

May 1, 2008, 11:33:00 AM5/1/08

to

If you want to solve that you need to install a firefox 3 beta.
getComputedStyle is not implemented for SVG in firefox 2.

Best regards

Robert.