cannot set fill property from interactivity menu

Discuss SVG code, accessible via the XML Editor.
sovos
Posts: 7
Joined: Thu Feb 28, 2013 4:54 am

cannot set fill property from interactivity menu

Postby sovos » Thu Feb 28, 2013 5:12 am

If I write

Code: Select all

evt.target.setAttribute('stroke', 'red');
on the "onmouseover" section of the interactivity object property, the effect is applied to the text, but if I do

Code: Select all

evt.target.setAttribute('fill', 'red');
it doesn't work. Does anyone have any hint on the issue?

Thanks!

sovos
Posts: 7
Joined: Thu Feb 28, 2013 4:54 am

Re: cannot set fill property from interactivity menu

Postby sovos » Sun Mar 03, 2013 9:58 pm

Am I the only one having this problem? Or is it something known that I'm supposed to go around setting things directly from the code?

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: cannot set fill property from interactivity menu

Postby brynn » Mon Mar 04, 2013 2:59 am

Welcome to InkscapeForum :D

I'm sorry no one has answered your question. I don't know much about SVG/XML code, which is why I haven't answered. But I do know about a tutorial that someone wrote for us, for making an interactive image/webpage. Maybe you can find some helpful info here: viewtopic.php?f=8&t=12113.

Here's some other info about using scripts for animation. I don't know if it applies to what you're doing, but I do know that bits of script are required for the project I linked you to. http://srufaculty.sru.edu/david.dailey/ ... htm#JSAnim

Hopefully someone else will have more useful info for you Image

sovos
Posts: 7
Joined: Thu Feb 28, 2013 4:54 am

Re: cannot set fill property from interactivity menu

Postby sovos » Tue Mar 05, 2013 3:44 am

Hey, thanks for the welcome and the reply! The links you gave me are interesting (and I thank you for them!), but they are not what I'm looking for.

I think that there must be some sort of bug, as I'm trying to do something really simple that's presented in many guides, but it doesn't seem to work. The problem is so elementary that it doesn't seem to be any possible error in the procedure.

For future references: I'm trying to use Inkscape as a mockup application, but I can't get the text to change its fill property dynamically. I'm running on the latest Lubuntu, and have tested the svg both in Chrome and Firefox.

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: cannot set fill property from interactivity menu

Postby brynn » Tue Mar 05, 2013 3:49 am

Oh text! I missed that part. It's not flowed text is it? Flowed text doesn't work right on the internet.

sovos
Posts: 7
Joined: Thu Feb 28, 2013 4:54 am

Re: cannot set fill property from interactivity menu

Postby sovos » Tue Mar 05, 2013 3:59 am

I've got no idea about that. It's standard Inkscape text (I think °.°).
The code produced is

Code: Select all

<text
       xml:space="preserve"
       style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#808080;fill-opacity:1;stroke:none;font-family:Sans"
       x="2210.6606"
       y="-9119.7529"
       id="text3985"
       sodipodi:linespacing="125%"
       onmouseover="this.style.fill = 'red'"
       onmouseout="this.style.stroke = 'red'"><tspan
         id="tspan3987"
         sodipodi:role="line"
         x="2210.6606"
         y="-9119.7529"
         style="font-size:20px;fill:#808080">Esplora</tspan></text>

In this example only the onmouseout event will work.

sovos
Posts: 7
Joined: Thu Feb 28, 2013 4:54 am

Re: cannot set fill property from interactivity menu

Postby sovos » Tue Mar 05, 2013 4:03 am

Hey, you got this right!
Removing the tspan tag everything works fine.
How can I do that from Inkscape?

Many thanks!

sovos
Posts: 7
Joined: Thu Feb 28, 2013 4:54 am

Re: cannot set fill property from interactivity menu

Postby sovos » Tue Mar 05, 2013 4:09 am

(I'm trying to flow and unflow the text, but nothing seems to change code-wise. I'm trying to dig further into your insightful tip.)

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: cannot set fill property from interactivity menu

Postby brynn » Tue Mar 05, 2013 4:50 pm

Unfortunately, I don't know if tspan is related to flowed text or not. Actually, isn't tspan an.html

~suv
Posts: 2272
Joined: Sun May 10, 2009 2:07 am

Re: cannot set fill property from interactivity menu

Postby ~suv » Tue Mar 05, 2013 7:09 pm

sovos wrote:Removing the tspan tag everything works fine.
How can I do that from Inkscape?

The problem is not fact that text in Inkscape will always be inside a <text><tspan></tspan></text> structure (this is not an issue with Inkscape's custom 'Flowed text' format BTW - <text> and <tspan> are basic SVG 1.1 elements). In your example the style attribute of the <tspan> overrides the 'fill' property of the parent <text> style attribute, and any changes you apply to the 'fill' property in the style atttribute of the parent <text> object thus does not affect the fill color used to render the content of the <tspan> element (basic style inheritance in play here).

Tips when creating text in Inkscape:
Don't highlight text content when you style a text object because then the style will be applied to a <tspan> element wrapping that highlighted portion of the text (only use this you indeed want to style a portion of the text content differently (e.g. with a different font face / size or fill color) than the rest -> the highlighted portion of the text content will then get wrapped into another (nested) <tspan> element).

sovos
Posts: 7
Joined: Thu Feb 28, 2013 4:54 am

Re: cannot set fill property from interactivity menu

Postby sovos » Tue Mar 05, 2013 10:43 pm

I see now!
The problem indeed raised when I changed the font size selecting all the text, although I didn't create the text dragging a box.

Thank you both for your helpful suggestions and time.
I wish you all a great day!
Sovos

SorinMS
Posts: 1
Joined: Sat Nov 30, 2013 3:22 am

Re: cannot set fill property from interactivity menu

Postby SorinMS » Sat Nov 30, 2013 3:34 am

I've struggle with the same problem for 3 days. Finally I've notice that if I remove from style the property that I wish to change, all is OK. Anyway, if you need that propriety to be defined in svg from the beginning, you could write it outside the style declaration.
For example: if I want to change by script the fill propriety of an object from green to red, I notice that style="fill:green;..." generated by Inkscape doesn't work. Then, I must delete fill:green and put it manually outside style declaration, as fill="green". Now I'm able to change green with red from a script.


Return to “SVG / XML Code”