I'm working with an SVG file that has been output from Adobe Illustrator, so there is probably quite a bit of unnecessary code. After searching and searching I was able to come up with this.
<?xml-stylesheet type="text/css" href="SVG_css.css"?>
path:hover{
fill:#005289;
}
which gets the rollovers to work from the external stylesheet, but it of course targets every path as a rollover.
For instance, I need to target paths in a group so three elements highlight when rolled over. here is the code structure from Illustrator.
<g id="WIRE_ROOM">
<path fill="#BCBEC0" d="M357.3,24.4c0,0.6-0.6,1-1.4,1h-8.1c-0.8,0-1.4-0.5-1.4-1v-8.9c0-0.6,0.6-1,1.4-1h8.1c0.8,0,1.4,0.5,1.4,1
V24.4z"/>
<path fill="#BCBEC0" d="M357.3,51.4c0,0.6-0.6,1-1.4,1h-8.1c-0.8,0-1.4-0.5-1.4-1v-8.9c0-0.6,0.6-1,1.4-1h8.1c0.8,0,1.4,0.5,1.4,1
V51.4z"/>
<path fill="#BCBEC0" d="M376.7,24.4c0,0.6-0.6,1-1.4,1h-8.1c-0.8,0-1.4-0.5-1.4-1v-8.9c0-0.6,0.6-1,1.4-1h8.1c0.8,0,1.4,0.5,1.4,1
V24.4z"/>
</g>
I've tried associating the ID to the stylesheet, and didn't have any luck...I also tried associating a class directly into the SVG.
If I add class="locations" to the path it of course only rolls over that one element and not the group of elements. When I added the class like this nothing happened. g id="WIRE_ROOM" class="locations"
I would appreciate if someone could assist me with this, as I've searched and tried everything I know to try.
So in the case of "WIRE_ROOM" those are different pieces of equipment, and I need the hover to highlight all 3 of those areas to signify one common area. Thank you!
For future reference, the selector you're looking for is g#WIRE_ROOM:hover path or g.locations:hover path (I'd recommend using the class instead of an ID).
The hover state on the group is triggered when any of the child elements are moused-over, and then the selector applies the hover style to all the child paths.
You have to specifically mention the paths in the selector -- you can't rely on inheritance -- because your file directly sets fill colors on the paths, which takes precedence over any inherited style.
Related
I am using an svg file with symbols as follow:
<svg xmlns="http://www.w3.org/2000/svg">
<use xlink:href="aFile.svg#symbolName"/>
</svg>
Now I would like to know if the "aFile.svg" really contains the "symbolName" and simply raise an exception if not. For now, I did put an event onload on the <use> tag. When the <use> get loaded, I check the content's item size getBoundingClientRect(). If the size is greater than 0,0 it means we do have an item….
Everything was working fine until I tried on Safari. On Safari, I am getting a racing condition problem. The size of the <use> tag is not always ready when safari firesw onload. Which means that, sometimes I get the size, sometimes not (it is really random…). I temporarily fixed it using a window.timeout(...) but it is not the proper way to fix racing condition issues. So just to say, I am wondering if there is a cleaner way to achieve the same?
You probably cannot do this directly. If you first injected your file aFile.svg into the DOM you could simply use querySelector() to detect if the Symbol is available.
For injecting the SVG file this like may be useful: https://css-tricks.com/ajaxing-svg-sprite/
I made a vector graphic in Inkscape, including layers and sub-layers for further use in Processing. I named all the layers in the UI, and realized that the final SVG only creates an inkscape:label attribute with that name, but id remains generic:
<svg:g id="layer1" inkscape:label="My custom label">
I know I can manually edit the labels in the XML editor, but is there a setting somewhere to automatically use the layer name as id?
I recently came across this question, as I was looking for the same topic. As it turned out, Inkscape (v0.92) has functions for that purpose now.
You can set IDs, and Labels in the Inkscape GUI in Object Properties menu, and they will be applied to the XML code then.
Example
Inkscape GUI
Draw a yellow rectangle and select it
Click on Object -> Object Properties...
In the menu set ID to yellow_rect and Label to #yellow_rect
Apply changes by a click on Set
To complete this example, repeat the steps above to create red_rect, set Label and ID
Eventually, group both rectanbles and set identifiers for the group as well.
XML Code
When I open the SVG file, Inkscape put my identifiers to the appropriate XML tags.
<g
id="rect_group">
<rect
rx="0.11797347"
y="250.69791"
x="5.0270834"
height="18.785416"
width="30.427082"
id="yellow_rect1"
style="fill:#f4ff00;fill-opacity:1;stroke:#000000;stroke-width:0.52916667;stroke-linejoin:round;stroke-miterlimit:3.79999995;stroke-dasharray:none;stroke-opacity:1" />
<rect
rx="0.11797347"
y="258.89999"
x="24.606249"
height="16.933332"
width="33.602081"
id="red_rect1"
style="fill:#f40000;fill-opacity:1;stroke:#000000;stroke-width:0.52916664;stroke-linejoin:round;stroke-miterlimit:3.79999995;stroke-dasharray:none;stroke-opacity:1" />
</g>
I have the same requirement when I am creating a svg for Fritzing, because fritzing doesn't refer to the inkscape:label. In such circumstance, I can make sure that label holds the legit value for id. So I make a script to do saving myself out of the dirty and heavy job.
Please note that the script ONLY READ 'Plain SVG' format.
https://gist.github.com/TerrenceSun/972ef4eea97f331af1e6abfcafb7c6e5
I don't know about a setting to automatically use the layer name as id. But why not do it the other way round: if you remove the inkscape:label attribute, then the layer name automatically becomes the id of the svg:g in the inkscape UI.
The attribute inkscape:groupmode=layer is enough to make the svg:g a layer element.
I have a SVG logo rendered to the canvas using fabric.js, the original SVG is all black in color but I need the user to be able to change the color of each different parts of the logo, resulting in a object with multiple colors, e.g.:
wikimediauruguay.org/images/5/53/Wikimedia-logo.png
How can I achieve this? If I just use object.setFill() it changes the color of the entire object but I need to change the color of every part separately to whatever colors the user choose. Thanks.
EDIT: found the solution, just posted my answer below in case somebody else has the same question.
Perhaps someone who knows something about fabric.js would answer in a way that makes more sense for your case, but with plain old svg, an object is often a <g< element with things ( like <rect>, <path>, <ellipse>) inside. Each child of the group, can have its own event handler:
<g>
<path onclick='handle(evt)' attrs=stuff />
<rect onclick='handle(evt)' attrs=stuff />
<circle onclick='handle(evt)' attrs=stuff />
</g>
The function activated by the click can then interrogate evt.target to see which of the subelements received the click, sorta like this:
if (evt.target.nodeName=="path") {evt.target.setAttribute("fill","purple")}
Solved mi problem in a very simple way: I just needed to edit the SVG on Illustrator so that every different colored part of the logo will be on a different layer, then when I loaded the SVG via fabric.loadSVGFromURL() each layer will be treated as a different object by fabric.js, then I just could edit each object (layer) separately (setFill(), etc).
I am new to svg, as far as I saw everywhere they using svg elements within g tag, is there any particular reason for using svg elements within g tag other than applying transformation for whole set of elements?
That's a pretty important and useful reason. But other reasons you might do it are so you can:
apply the same styling (eg. fill="blue") to a set of elements,
reference to the group of objects from a use.
Not to mention the simple organisational reasons.
http://tutorials.jenkov.com/svg/g-element.html says:
The <g> element is used to group SVG shapes together. Once grouped you can transform the whole group of shapes as if it was a single shape. This is an advantage compared to a nested <svg> element which cannot be the target of transformation by itself.
I am trying to create an interactive map where users can click on different provinces in the map to get info specific to that province.
Example:
archived: http://www.todospelaeducacao.org.br/
archived: http://code.google.com/p/svg2imap/
So far I've only found solutions that have limited functionality. I've only really searched for this using an SVG file, but I would be open to other file types if it is possible.
If anyone knows of a fully functioning way to do this (jQuery plug-in, PHP script, vector images) or a tutorial on how to do it manually please do share.
jQuery plugin for decorating image maps (highlights, select areas, tooltips):
http://www.outsharked.com/imagemapster/
Disclosure: I wrote it.
Sounds like you want a simple imagemap, I'd recommend to not make it more complex than it needs to be. Here's an article on how to improve imagemaps with svg. It's very easy to do clickable regions in svg itself, just add some <a> elements around the shapes you want to have clickable.
A couple of options if you need something more advanced:
http://jqvmap.com/
http://jvectormap.com/
http://polymaps.org/
I think it's better to divide my answer to 2 parts:
A-Create everything from scratch (using SVG, JavaScript, and HTML5):
Create a new HTML5 page
Create a new SVG file, each clickable area (province) should be a separate SVG Polygon in your SVG file,
(I'm using Adobe Illustrator for creating SVG files but you can find many alternative software products too, for example Inkscape)
Add mouseover and click events to your polygons one by one
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1"
onmouseover="mouseOverHandler(evt)"
onclick="clickHandler(evt)" />
Add a handler for each event in your JavaScript code and add your desired code to the handler
function mouseOverHandler(evt) {};
function clickHandler(evt) {};
Add the SVG file to your HTML page (I prefer inline SVG but you can use linked SVG file too)
Upload the files to your server
B-Use a software like FLDraw Interactive Image Creator (only if you have a map image and want to make it interactive):
Create an empty project and choose your map image as your base image when creating the new project
Add a Polygon element (from the Shape menu) for each province
For each polygon double click it to open the Properties window where you can choose an event type for mouse-over and click,
also change the shape opacity to 0 to make it invisible
Save your project and Publish it to HTML5, FLDraw will create a new folder that contains all of the required files for your project that you can upload to your server.
Option (A) is very good if you are programmer or you have someone to create the required code and SVG file for you,
Option (B) is good if you don't want to hire someone or spend your own time for creating everything from scratch
You have some other options too, for example using HTML5 Canvas instead of SVG, but it's not very easy to create a Zoomable map using HTML5 Canvas,
maybe there are some other ways too that I'm not aware of.
Just in case anyone will search for it - I used it on several sites, always the customization and RD possibilities were a perfect fit for what I needed. Simple and it is free to use:
Clickable CSS Maps
One note for more scripts on a site: I had some annoying problems with getting to work a map (that worked as a graphic menu) in Drupal 7. There where many other script used, and after handling them, I got stuck with the map - it still didn't work, although the jquery.cssmap.js, CSS (both local) and the script in the where in the right place. Firebug showed me an error and I suddenly eureka - a simple oversight, I left the script code as it was in the example and there was a conflict. Just change the front function "$" to "jQuery" (or other handler) and it works perfect. :]
Here's what I ment (of course you can put it before instead of the ):
<script type="text/javascript">
jQuery(function($){
$('#map-country').cssMap({'size' : 810});
});
</script>
Go to SVG to Script
with your SVG the default output is the map in SVG
Code which adds events is also added but is easily identified and can be altered as required.
I have been using makeaclickablemap for my province maps for some time now and it turned out to be a really good fit.
I had the same requirements and finally this Map converter worked for me. It is the best plugin for any map generation.
Here is another image map plugin I wrote to enhance image maps: https://github.com/gestixi/pictarea
It makes it easy to highlight all the area and let you specify different styles depending on the state of the zone: normal, hover, active, disable.
You can also specify how many zones can be selected at the same time.
The following code may help you:
$("#svgEuropa [id='stallwanger.it.dev_shape_DEU']").on("click",function(){
alert($(this).attr("id"));
});
Source
You have quite a few options for this:
1 - If you can find an SVG file for the map you want, you can use something like RaphaelJS or SnapSVG to add click listeners for your states/regions, this solution is the most customizable...
2 - You can use dedicated tools such as clickablemapbuilder (free) or makeaclickablemap (i think free also).
[disclaimer] Im the author of clickablemapbuilder.com :)
<script type="text/javascript">
jQuery(function($){
$('#map-country').cssMap({'size' : 810});
});
</script>
strong text