A way to dynamically change a referenced SVG? - javascript

Let's say I have the following SVG:
<svg xmlns="http://www.w3.org/2000/svg" width="40.723" height="35.1" viewBox="0 0 40.723 35.1">
<defs>
<style>.a{ fill:none; stroke:#53247f; stroke-linecap:round; stroke-linejoin:round; stroke-width:2.2px; } .b{ fill:#53247f; } .c{ fill:#fff; font-size:10px; font-family:Rubik; }</style>
</defs>
<g transform="translate(-79.277 -498.9)">
<path class="a" d="M37.042,19.867a15.15,15.15,0,0,1-1.627,6.87,15.367,15.367,0,0,1-13.74,8.5,15.15,15.15,0,0,1-6.87-1.627L4.5,37.042l3.435-10.3a15.15,15.15,0,0,1-1.627-6.87,15.367,15.367,0,0,1,8.5-13.74A15.15,15.15,0,0,1,21.675,4.5h.9A15.331,15.331,0,0,1,37.042,18.963Z" transform="translate(75.877 495.5)"/>
<circle class="b" cx="10" cy="10" r="10" transform="translate(100 514)"/>
<text class="c" transform="translate(110 528)">
<tspan x="-2.14" y="0">1</tspan>
</text>
</g>
</svg>
And I'd like to reference it (with <img src=""/>, for example, or any other possible way) instead of having it lying around, uglifying my code.
How would I then be able to dynamically change <tspan x="-2.14" y="0">1</tspan></text></g></svg> to <tspan x="-2.14" y="0">{{number}}</tspan></text></g></svg>?
Thanks

Related

Hover events for a dashed line in an SVG

An SVG with a line (or path) which uses stroke-dasharray only seems to trigger CSS and JS hover events when the user hovers over the solid parts of the dashed line: https://codepen.io/anon/pen/YeXoZy
Is there a simple way to make both the JS and CSS events trigger when the solid or invisible parts of the line are hovered?
My current plan is to draw a second, invisible line following the same path and use it to detect mouse events. https://codepen.io/anon/pen/BYNgRR This seems heavy handed and I'm hoping there's a cleaner way I'm missing.
I'm not sure how to do it without the second "detector" line, but a less heavy handed way is at least possible without the JS.
Switch the order of the lines, then you can use the hover selector as usual for the dashed line, then use + in a selector for the detector line to change the properties of the line immediately following it:
https://codepen.io/RyanGoree/pen/LQVKBV
This can be solved somewhat by using a rect instead of line and using SVG transforms with patterns.
An example can be seen at this CodePen.
It essentially bubbles down to:
<svg height="210" width="500">
<defs>
<pattern id="pattern1"
width="10" height="10"
patternUnits="userSpaceOnUse"
patternTransform="rotate(0 60 60)">
<line stroke="green" stroke-width="12px" y2="10"/>
</pattern>
<pattern id="pattern2"
width="10" height="10"
patternUnits="userSpaceOnUse"
patternTransform="rotate(0 60 60)">
<line stroke="red" stroke-width="12px" y2="10" stroke="transparent"/>
</pattern>
</defs>
<g transform="rotate(45 60 60)">
<rect x="0" y="0" width="500" height="5"/>
</g>
</svg>
And the following CSS:
rect {
fill: url(#pattern1)
}
rect:hover {
fill: url(#pattern2)
}
This is an old topic I know. But found the answer on Css hover sometimes doesn't work on svg paths
If you want to trigger the event only on stroke/visible, use pointer-events: stroke; or pointer-events: visible; (only the stroke) and pointer-events: all; (on both)
Here is a code example:
<body>
<div id="donut-score" class="svg-item" style="display: block;">
<svg width="100%" height="100%" viewBox="0 0 40 40" class="donut">
<circle class="donut-hole" cx="20" cy="20" r="15.91549430918954" fill="#fff"></circle>
<circle class="donut-ring" cx="20" cy="20" r="15.91549430918954" fill="transparent" stroke-width="3.5"></circle>
<circle id="donut-score-part-1" class="donut-segment donut-segment-1" onmousemove="this.style.stroke ='orange';" onmouseout="this.style.stroke = '#ff8197';" cx="20" cy="20" r="15.91549430918954" fill="transparent" stroke-width="3.5" stroke-dasharray="20 80" stroke-dashoffset="25"></circle>
<g class="donut-text-item donut-text-item">
<text y="50%" transform="translate(0, 2)">
<tspan id="donut-score-text" x="50%" text-anchor="middle" class="donut-text">Score </tspan>
<tspan id="donut-score-aantal" x="50%" Y="65%" text-anchor="middle" class="donut-text">0 </tspan>
</text>
</g>
</svg>
</div>
</body>
ccs:
.donut-segment {
stroke: #ff8197;
}
.svg-item {
width:200px;
font-size: 16px;
margin: 0 auto;
}
.donut-text {
font-size: 0.35em;
line-height: 1;
transform: translateY(0.5em);
font-weight: bold;
}
If you add pointer-events: stroke; to the class .donut-segment then it only works on the stroke. If you use non or pointer-events: all it works on both. I tested it in codepen.

How do you center a <g> within a <svg> in D3.js?

I am trying to center a group that has a d3 tree inside of it. The svg is currently positioned perfectly across the browser and I am just trying to get the dynamically loaded tree to stay in the center of that svg element. All tree elements are within one group and have a zoom listener and have the ability to pan.
<svg width="1535" height="685" overflow-y="hidden" class="overlay">
<g transform="translate(742.5,342.5)scale(1)">
<g class="node" transform="translate(0,25)">
<circle class="nodeCircle" r="4.5" style="fill: rgb(255, 255, 255)</circle>
<text x="10" dy=".35em" class="nodeText" text-anchor="start" style="fill-opacity: 1;"></text>
<text x="10" dy="1.5em" class="nodeText" text-anchor="start"></text>
</g>
</g>
</svg>
i hope you understand the concept
first you draw svg with width: 1535 and hight :685
you want to make g element on middle of it
middle of it means half of width(1535/2) and half of height (685/2)
w:767.5 h:342.5
you draw g and transform it. good point but you must set transform to right place, that means on middle of svg to 742.5 and 342.5
so that means you need transform x,y) it more (25,0)
why you set it wrong
<g class="node" transform="translate(0,25)">
it must be
<g class="node" transform="translate(25,0)">
this is little example
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg{
border-style: solid;
border-color: red;
}
}
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
<body>
<svg width="200" height="100" overflow-y="hidden" class="overlay">
<g transform="translate(70,20)scale(1)">
<g class="node" transform="translate(30,30)">
<circle class="nodeCircle" r="10" style="fill: black"</circle>
<text x="10" dy=".35em" class="nodeText" text-anchor="start" style="fill-opacity: 1;"></text>
<text x="10" dy="1.5em" class="nodeText" text-anchor="start"></text>
</g>
</g>
</svg>
<svg width="200" height="100" overflow-y="hidden" class="overlay">
<g transform="translate(100,50)scale(1)">
<g class="node" transform="translate(0,0)">
<circle class="nodeCircle" r="10" style="fill: black"</circle>
<text x="10" dy=".35em" class="nodeText" text-anchor="start" style="fill-opacity: 1;"></text>
<text x="10" dy="1.5em" class="nodeText" text-anchor="start"></text>
</g>
</g>
</svg>
<br/>
<svg width="200" height="100" overflow-y="hidden" class="overlay">
<g transform="translate(200,50)scale(1)">
<g class="node" transform="translate(0,0)">
<circle class="nodeCircle" r="10" style="fill: black"</circle>
<text x="10" dy=".35em" class="nodeText" text-anchor="start" style="fill-opacity: 1;"></text>
<text x="10" dy="1.5em" class="nodeText" text-anchor="start"></text>
</g>
</g>
</svg>
<svg width="200" height="100" overflow-y="hidden" class="overlay">
<g transform="translate(100,10)scale(1)">
<g class="node" transform="translate(100,40)">
<circle class="nodeCircle" r="10" style="fill: black"</circle>
<text x="10" dy=".35em" class="nodeText" text-anchor="start" style="fill-opacity: 1;"></text>
<text x="10" dy="1.5em" class="nodeText" text-anchor="start"></text>
</g>
</g>
</svg>
</body>

Calculate SVG.Text Length before drawing [duplicate]

I want to color the background of svg text similar to background-color in css
I was only able to find documentation on fill, which colors the text itself
Is it even possible?
You could use a filter to generate the background.
<svg width="100%" height="100%">
<defs>
<filter x="0" y="0" width="1" height="1" id="solid">
<feFlood flood-color="yellow" result="bg" />
<feMerge>
<feMergeNode in="bg"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<text filter="url(#solid)" x="20" y="50" font-size="50">solid background</text>
</svg>
No this is not possible, SVG elements do not have background-... presentation attributes.
To simulate this effect you could draw a rectangle behind the text attribute with fill="green" or something similar (filters). Using JavaScript you could do the following:
var ctx = document.getElementById("the-svg"),
textElm = ctx.getElementById("the-text"),
SVGRect = textElm.getBBox();
var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", SVGRect.x);
rect.setAttribute("y", SVGRect.y);
rect.setAttribute("width", SVGRect.width);
rect.setAttribute("height", SVGRect.height);
rect.setAttribute("fill", "yellow");
ctx.insertBefore(rect, textElm);
The solution I have used is:
<svg>
<line x1="100" y1="100" x2="500" y2="100" style="stroke:black; stroke-width: 2"/>
<text x="150" y="105" style="stroke:white; stroke-width:0.6em">Hello World!</text>
<text x="150" y="105" style="fill:black">Hello World!</text>
</svg>
A duplicate text item is being placed, with stroke and stroke-width attributes. The stroke should match the background colour, and the stroke-width should be just big enough to create a "splodge" on which to write the actual text.
A bit of a hack and there are potential issues, but works for me!
Instead of using a <text> tag, the <foreignObject> tag can be used, which allows for XHTML content with CSS.
No, you can not add background color to SVG elements. You can do it programmatically with d3.
var text = d3.select("text");
var bbox = text.node().getBBox();
var padding = 2;
var rect = self.svg.insert("rect", "text")
.attr("x", bbox.x - padding)
.attr("y", bbox.y - padding)
.attr("width", bbox.width + (padding*2))
.attr("height", bbox.height + (padding*2))
.style("fill", "red");
Answer by Robert Longson (#RobertLongson) with modifications:
<svg width="100%" height="100%">
<defs>
<filter x="0" y="0" width="1" height="1" id="solid">
<feFlood flood-color="yellow"/>
<feComposite in="SourceGraphic" operator="xor"/>
</filter>
</defs>
<text filter="url(#solid)" x="20" y="50" font-size="50"> solid background </text>
<text x="20" y="50" font-size="50">solid background</text>
</svg>
and we have no bluring and no heavy "getBBox" :)
Padding is provided by white spaces in text-element with filter.
It's worked for me
Going further with #dbarton_uk answer, to avoid duplicating text you can use paint-order=stroke style:
<svg>
<line x1="100" y1="100" x2="350" y2="100" style="stroke:grey; stroke-width: 100"/>
<text x="150" y="105" style="stroke:white; stroke-width:0.5em; fill:black; paint-order:stroke; stroke-linejoin:round">Hello World!</text>
</svg>
Note the stroke-linejoin:round which is needed to avoid seeing spikes for the W sharp angle.
You can combine filter with the text.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>SVG colored patterns via mask</title>
</head>
<body>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter x="0" y="0" width="1" height="1" id="bg-text">
<feFlood flood-color="white"/>
<feComposite in="SourceGraphic" operator="xor" />
</filter>
</defs>
<!-- something has already existed -->
<rect fill="red" x="150" y="20" width="100" height="50" />
<circle cx="50" cy="50" r="50" fill="blue"/>
<!-- Text render here -->
<text filter="url(#bg-text)" fill="black" x="20" y="50" font-size="30">text with color</text>
<text fill="black" x="20" y="50" font-size="30">text with color</text>
</svg>
</body>
</html>
For those wondering how to apply padding to a text element when it has a background like in the Robert's answer, do the following:
<svg>
<defs>
<filter x="-0.1" y="-0.1" width="1.2" height="1.2" id="solid">
<feFlood flood-color="#171717"/>
<feComposite in="SourceGraphic" operator="xor" />
</filter>
</defs>
<text filter="url(#solid)" x="20" y="50" font-size="50">Hello</text>
</svg>
In the example above, filter's x and y positions can be used as transform: translate(-10%, -10%) would, and width and height values can be read as 120% and 120%. So we made background 20% bigger, and offsetted it -10%, so background is now 10% bigger on each side of the text.
this is my favorite hack (not sure it should work). It refer an element that is not yet displayed, and it works pretty well
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 620 40" preserveAspectRatio="xMidYMid meet">
<defs>
<filter x="-0.02" y="0" width="1.04" height="1.1" id="removebackground">
<feFlood flood-color="#00ffff"/>
</filter>
</defs>
<!--Draw the text-->
<use xlink:href="#mygroup" filter="url(#removebackground)" />
<g id="mygroup">
<text id="text1" x="9" y="20" style="text-anchor:start;font-size:14px;">custom text with background</text>
<line x1="200" y1="18" x2="200" y2="36" stroke="#000" stroke-width="5"/>
<line x1="120" y1="27" x2="203" y2="27" stroke="#000" stroke-width="5"/>
</g>
</svg>
The previous answers relied on doubling up text and lacked sufficient whitespace.
By using atop and I was able to get the results I wanted.
This example also includes arrows, a common use case for SVG text labels:
<svg viewBox="-105 -40 210 234">
<title>Size Guide</title>
<defs>
<filter x="0" y="0" width="1" height="1" id="solid">
<feFlood flood-color="white"></feFlood>
<feComposite in="SourceGraphic" operator="atop"></feComposite>
</filter>
<marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z"></path>
</marker>
</defs>
<g id="garment">
<path id="right-body" fill="none" stroke="black" stroke-width="1" stroke-linejoin="round" d="M0 0 l30 0 l0 154 l-30 0"></path>
<path id="right-sleeve" d="M30 0 l35 0 l0 120 l-35 0" fill="none" stroke-linejoin="round" stroke="black" stroke-width="1"></path>
<use id="left-body" href="#right-body" transform="scale(-1,1)"></use>
<use id="left-sleeve" href="#right-sleeve" transform="scale(-1,1)"></use>
<path id="collar-right-top" fill="none" stroke="black" stroke-width="1" stroke-linejoin="round" d="M0 -6.5 l11.75 0 l6.5 6.5"></path>
<use id="collar-left-top" href="#collar-right-top" transform="scale(-1,1)"></use>
<path id="collar-left" fill="white" stroke="black" stroke-width="1" stroke-linejoin="round" d="M-11.75 -6.5 l-6.5 6.5 l30 77 l6.5 -6.5 Z"></path>
<path id="front-right" fill="white" stroke="black" stroke-width="1" d="M18.25 0 L30 0 l0 154 l-41.75 0 l0 -77 Z"></path>
<line x1="0" y1="0" x2="0" y2="154" stroke="black" stroke-width="1" stroke-dasharray="1 3"></line>
<use id="collar-right" href="#collar-left" transform="scale(-1,1)"></use>
</g>
<g id="dimension-labels">
<g id="dimension-sleeve-length">
<line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="85" y1="0" x2="85" y2="120" stroke="black" stroke-width="1"></line>
<text font-size="10" filter="url(#solid)" fill="black" x="85" y="60" class="dimension" text-anchor="middle" dominant-baseline="middle"> 120 cm</text>
</g>
<g id="dimension-length">
<line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="-85" y1="0" x2="-85" y2="154" stroke="black" stroke-width="1"></line>
<text font-size="10" filter="url(#solid)" fill="black" x="-85" y="77" text-anchor="middle" dominant-baseline="middle" class="dimension"> 154 cm</text>
</g>
<g id="dimension-sleeve-to-sleeve">
<line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="-65" y1="-20" x2="65" y2="-20" stroke="black" stroke-width="1"></line>
<text font-size="10" filter="url(#solid)" fill="black" x="0" y="-20" text-anchor="middle" dominant-baseline="middle" class="dimension"> 130 cm </text>
</g>
<g title="Back Width" id="dimension-back-width">
<line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="-30" y1="174" x2="30" y2="174" stroke="black" stroke-width="1"></line>
<text font-size="10" filter="url(#solid)" fill="black" x="0" y="174" text-anchor="middle" dominant-baseline="middle" class="dimension"> 60 cm </text>
</g>
</g>
</svg>
An obvious workaround to the problem of the blur produced by the filter effect is to render the <text> two times: once for the background (with transparent characters) and once for the characters (without a background filter).
For me, this was the only way to make the text readable in Safari.
<svg width="100%" height="100%">
<filter x="0" y="0" width="1" height="1" id="solid">
<feFlood flood-color="yellow" />
</filter>
<g transform="translate(20, 50)" font-size="50">
<text aria-hidden="true" fill="none" filter="url(#solid)">solid background</text>
<text fill="blue">solid background</text>
</g>
</svg>
The aria-hidden="true" attribute is there to prevent screen readers from speaking the text twice, if the user uses a screen reader.
You can add style to your text:
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
text-shadow: rgb(255, 255, 255) -2px -2px 0px, rgb(255, 255, 255) -2px 2px 0px,
rgb(255, 255, 255) 2px -2px 0px, rgb(255, 255, 255) 2px 2px 0px;"
White, in this example.
Does not work in IE :)

How to get the "id" attribute from each <g> tag in a nested svg with javascript?

I am newbie with javascript and dealing with svg files, but I would like to get the 'id' attribute from each <g> tag in a nested svg through a javascript function depending on which g element is clicked. According to my example I want to get:
MyGroup1
MyGroup2
And how could I save the result as string variable?
Please,I would appreciate if someone could show me how to get this, as I've searched and tried everything I know to try.
<html>
<script type="text/javascript">
function(){
//What javascript code should be here?
}
</script>
<body>
<svg
width="200" height="200"
style="background-color: #D2B48C; display: block; margin-bottom: 5px;"
id="embeddedSVG">
<g
id="myGroup1 onclick="function();"
fill="blue"
style="font-size: 18px; text-anchor: middle; font-family: serif;">
<circle
id="myCircle"
cx="100" cy="75" r="50"
stroke="firebrick"
stroke-width="3" />
<text x="100" y="155">Hello World</text>
<text x="100" y="175">From Embedded SVG!</text>
</g>
<g id="MyGroup2" onclick="funciont();">
<rect x="30" y="40" width="180" height="30" fill="#ddd" stroke="black" />
<text x="50" y="63" font-size="18pt" fill="black">
Display Msg</text>
</g>
</svg>
</body>
</html>
You can pass this as a parameter to the function.
function showId(g) {
var str = g.id;
console.log(str);
}
#embeddedSVG {
background-color: #D2B48C;
display: block;
margin-bottom: 5px;
}
#myGroup1 {
font-size: 18px;
text-anchor: middle;
font-family: serif;
}
<svg width="200" height="200" id="embeddedSVG">
<g id="myGroup1" onclick="showId(this)" fill="blue">
<circle id="myCircle" cx="100" cy="75" r="50" stroke="firebrick" stroke-width="3" />
<text x="100" y="155">Hello World</text>
<text x="100" y="175">From Embedded SVG!</text>
</g>
<g id="MyGroup2" onclick="showId(this)">
<rect x="30" y="40" width="180" height="30" fill="#ddd" stroke="black" />
<text x="50" y="63" font-size="18pt" fill="black">Display Msg</text>
</g>
</svg>

Interacting with a .svg image

I have an image in the format .svg like the one below.
I want to make a webpage where the user can interact with a image like this, but with more nodes. The structure will be similar to a tree.
Is it possible to interact with this .svg image directly, using javascript/html/css?
If so, how?
Note: By interact I mean being able to click on the nodes -and the webpage recognizing it- and when one node is selected the color of the other nodes change.
Note2: I just have the .svg file, I don't know if I'm able to define this as a inline svg on html.
Note3: This image will have many nodes (80+), so I would rather not having to define a clickable area for each one of them and so on... But if this is the only solution, no problem.
Edit:
Here is the content of my .svg file:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.38.0 (20140413.2041)
-->
<!-- Title: g Pages: 1 -->
<svg width="134pt" height="116pt"
viewBox="0.00 0.00 134.00 116.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 112)">
<title>g</title>
<polygon fill="white" stroke="none" points="-4,4 -4,-112 130,-112 130,4 -4,4"/>
<!-- a -->
<g id="node1" class="node"><title>a</title>
<ellipse fill="none" stroke="black" cx="27" cy="-90" rx="27" ry="18"/>
<text text-anchor="middle" x="27" y="-86.3" font-family="Times New Roman,serif" font-size="14.00">a</text>
</g>
<!-- b -->
<g id="node2" class="node"><title>b</title>
<ellipse fill="none" stroke="black" cx="27" cy="-18" rx="27" ry="18"/>
<text text-anchor="middle" x="27" y="-14.3" font-family="Times New Roman,serif" font-size="14.00">b</text>
</g>
<!-- a->b -->
<g id="edge1" class="edge"><title>a->b</title>
<path fill="none" stroke="black" d="M27,-71.6966C27,-63.9827 27,-54.7125 27,-46.1124"/>
<polygon fill="black" stroke="black" points="30.5001,-46.1043 27,-36.1043 23.5001,-46.1044 30.5001,-46.1043"/>
</g>
<!-- c -->
<g id="node3" class="node"><title>c</title>
<ellipse fill="none" stroke="black" cx="99" cy="-18" rx="27" ry="18"/>
<text text-anchor="middle" x="99" y="-14.3" font-family="Times New Roman,serif" font-size="14.00">c</text>
</g>
<!-- b->c -->
<g id="edge2" class="edge"><title>b->c</title>
<path fill="none" stroke="black" d="M54,-18C56.6147,-18 59.2295,-18 61.8442,-18"/>
<polygon fill="black" stroke="black" points="61.9297,-21.5001 71.9297,-18 61.9297,-14.5001 61.9297,-21.5001"/>
</g>
</g>
</svg>
The SVG would need to be inline to have interaction on a page. If you embed an image then the image (.svg) is treated as a single object. For the inline SVG each node should have a separate ID if you want to select them individually.
Here's one I created for another answer.
svg {
display: block;
width: 20%;
margin: 25px auto;
border: 1px solid grey;
stroke: #006600;
}
#buttons polygon:hover {
fill: orange;
}
#buttons rect:hover {
fill: blue
}
#center {
fill: #00cc00;
}
#top {
fill: #cc3333;
}
#right {
fill: #663399;
}
#left {
fill: #bada55;
}
<svg viewbox="0 0 100 100">
<g id="buttons">
<rect id="center" x="25" y="25" height="50" width="50" />
<polygon id="top" points="0,0 100,0 75,25 25,25" />
<polygon id="right" points="100,0 75,25 75,75 100,100" />
<polygon id="bottom" points="0,100 25,75 75,75 100,100" />
<polygon id="left" points="0,0 25,25 25,75 0,100" />
</g>
</svg>
You don't necessarily need to have the svg inline, you could have it in an object tag.
So the html would look like...
<div id="svgdiv">
<object id="svgobject" data="objectclicktest.svg"></object>
</div>
and correspending js
var mySvg = document.getElementById("svgobject").contentDocument.querySelectorAll('svg');
var myNodes = mySvg[0].querySelectorAll('.node');
for( var i = 0; i < myNodes.length; i++ ) {
myNodes[i].addEventListener('click', changeStyle );
}
function changeStyle() {
this.style.fill="blue";
}
Example Click on letters and they should go blue. Note, (I don't think this would work in a setup like a fiddle though)
inline svg elements can interact like other html elements, you can set css rules on them and apply js on them too, you dont need areas
svg is a markup language, meaning that you can use css selector libraries such as jquery to interact with the given svg. You can query the svg in order to get an element by its id, or get an array of elements selected by class. You can attach event handlers to them such as click, mouseover, mouseenter, etc. You can even style them with css.

Categories