svg problems, fonts, onchange

alkinnon · Postby **alkinnon** » Tue Nov 05, 2013 2:29 am

Hi,

I started working on a website for a my wifes new business. I'm a developer by trade, but new to using svg interactively in websites.
I made a header with links in inkscape. after some digging I found I could use the svg events to make the separate text objects into interactive links.
My javascript inside the svg file looks like this:

Code: Select all

   // mouseOver event handler, where targt is the element in the svg that was interacted with
   function mouseOver(targt){
      targt.setAttribute('stroke', 'red');
      targt.setAttribute('fill', 'red');
   }   
   // mouseOut event handler, where targt is the element in the svg that was interacted with
   function mouseOut(targt){   
      targt.setAttribute('stroke', 'black');
      targt.setAttribute('fill', 'black');
   }

This will highlight anything whose onMouseOver or onMouseOut looks like

Code: Select all

onmouseover="mouseOver(evt.target);" onmouseout="mouseOut(evt.target)"

For text objects, this works perfectly, but in a browser, the sng fonts looked terrible. After some digging about, I found a solution where converting the font objects to path objects would resolve the issues.

Now the fonts look great on the webpage, but the onchange event is operating one character at a time instead of on each object.

An example has been attached of the svg file menu. The first link was converted to a path, so looks great but the mouseover event is not working correctly. The rest are text and work fine, but look terrible.

Can anyone tell me either how to get my fonts to look good, or alternatively how to get my path style links to behave as expected to mouse events?

Thanks in advance,
alkinnon

Lazur · Postby **Lazur** » Thu Nov 07, 2013 7:14 am

Hi!

I couldn't yet produce a working solution, but
after you convert the text to path (Ctrl+Shift+C), it will become a group of the characters, so
maybe try pressing Ctrl+Shift+G to ungroup the characters and after Ctrl+K to combine the paths together, before adding the javascript part to each word.

hulf2012 · Postby **hulf2012** » Thu Nov 07, 2013 1:37 pm

Hello,
Thanks for sharing your file. It helps to improve the knowledge about the svg format.

Lazur's advice is correct. Your converted text is now a group of paths. Ungroup and combine the paths, and now your script can be applied to the "welcome" path. I don't know if I did something but the "welcome" group seems duplicated. So I erased one and the other convertet to the "welcome" path. Other thing is that you had a lot of filters definitions which also erased, trying to find other solutions.

Keep in mind that the style of SVG graphics can be set in single attributes tags , or just in the style attribute. In your script you are setting single attributes, but Inkscape set all those attributes (color, stroke, opacity, font-name, etc) in a single attribute, the style attribute. So, It may appear some mess when configuring the style of the SVG elements.
According to this: http://tutorials.jenkov.com/svg/scripti ... -listeners
I changed your code to this:

Code: Select all

 var parentDocument = window.parent.document;// capture the parent document
    
   // called when a text element is clicked. calls an action from the parent html file to modify the page content
   function buttonClick(targt){
      parentDocument
   }
   
   // mouseOver event handler, where targt is the element in the svg that was interacted with
   function mouseOver(targt){
      // cursor: crosshair;
                // HERE, the modifications
      
      targt.style.stroke='red';
      targt.style.fill = 'red';
   }
   
   // mouseOut event handler, where targt is the element in the svg that was interacted with
   function mouseOut(targt){
      // cursor: crosshair;   
                // HERE, the modifications   
      targt.style.stroke='black';
      targt.style.fill = 'black';
   }

The style also can be configured by CSS, please see here:

nav3b.zip: (4.66 KiB) Downloaded 169 times

alkinnon · Postby **alkinnon** » Fri Nov 08, 2013 4:52 am

Fantastic feedback folks. I'll try your suggestions and let you know how it goes.

Regards,
Al

alkinnon · Postby **alkinnon** » Fri Nov 08, 2013 8:37 am

Problem solved. I followed Lazur's advice and got the events working as combined paths. My next problem was passing the cursor over each word made it flicker because if the cursor wasn't directly over a character, it would regard this as a mouse out event.
To solve this problem, I used the bezier/line tool to draw focus area paths over the text, and set the events on each of those paths, calling the following functions

Code: Select all

function mouseOverById(target_id){
      targt=document.getElementById(target_id);
      targt.style.stroke='red';
      targt.style.fill = 'red';
   }
   function mouseOutById(target_id){
      targt=document.getElementById(target_id);
      targt.style.stroke='black';
      targt.style.fill = 'black';
   }

The event code specified the id of each text path...

Code: Select all

onmouseover="mouseOverById('pathWelcome');"

The last step was to modify the pointer to a hand image, simulating a clickable link. To do this I set each focus path I created as members of a class called focus whose style looks like this

Code: Select all

      .focus{
        cursor: pointer;
      }

Now to make them clickable, and modify content in the parent html document using a form of ajax to avoid reloading the page. I've attached the updated example. Now I'm getting the idea, I'll be able to start tidying up the svg file using css and getting rid of unwanted bits.

I hope this is of use to someone else out there. I think svg has the potential to some really cool things out on the web. I'd love to see more people get into it.

Thanks again for your help,
Al

tylerdurden · Postby **tylerdurden** » Fri Nov 08, 2013 9:18 am

Very cool... thanks for sharing!

This is a read-only archive of the inkscapeforum.com site. You can search for info here or post new questions and comments at inkscape.org/forums

This is a read-only archive of the inkscapeforum.com site. This feature is no longer available.

InkscapeForum.com

svg problems, fonts, onchange

svg problems, fonts, onchange

Re: svg problems, fonts, onchange

Re: svg problems, fonts, onchange

Re: svg problems, fonts, onchange

Re: svg problems, fonts, onchange

Re: svg problems, fonts, onchange

Who is online