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.
Related
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
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.
This is an edited copy of https://stackoverflow.com/questions/29105120/preserve-aspect-ratio-for-svg-text-and-react-to-javascript-touch-events which I will remove, because it asked 2 related but technically different questions.
as I already explained in my last question, I'm trying to make a navigation-div with 4 buttons, one to go left, one to go right, another one to go down and yet another one to go up. Plus there needs to be an OK-button in the middle.
That worked really well with the explanation given here: Using CSS and HTML5 to create navigation buttons using trapezoids
I created the SVG like:
<div class="function height3x svg-container" style="height: 112px; width: 200px;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="mySVG" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none" style="background-color: whitesmoke">
<g class="function" id="keyboard_btn_24">
<polygon id="ok" points="25,25 75,25 75,75 25,75"></polygon>
<text id="ok_text" x="39" y="55">OK</text>
</g>
<g class="function" id="keyboard_btn_25">
<polygon id="up" stroke="black" stroke-width="0.1" points="0,0 100,0 65,35 35,35"></polygon>
<text x="42" y="20"></text>
</g>
<g class="function" id="keyboard_btn_26">
<polygon id="right" stroke="black" stroke-width="0.1" points="100,0 100,100 65,65 65,35"></polygon>
<text x="81" y="53"></text>
</g>
<g class="function" id="keyboard_btn_27">
<polygon id="down" stroke="black" stroke-width="0.1" points="0,100 35,65 65,65 100,100"></polygon>
<text x="42" y="91"></text>
</g>
<g class="function" id="keyboard_btn_28">
<polygon id="left" stroke="black" stroke-width="0.1" points="0,0 35,35 35,65 0,100"></polygon>
<text x="5" y="53"></text>
</g>
</svg>
</div>
But I have two problems that I seem not to be able to figure out.
First of all: While I want the SVG to be responsive, I don't want to scale the text without keeping the aspect-ratio given by the font.
I already tried (unsuccessfully) preserveAspectRatio, which does not seem to do much to the text.
Questions: How can you make the tag keep it's aspect ratio, while changing the aspect ratio of the svg?
You can view and edit the minimal example: jsFiddle
Paulie_D - Commented on my old question:
As for the Aspect Ratio, you should remove the width & height 100%
values. They aren't really needed. The SVG will scale to the required
size based on the div size. - jsfiddle.net/2qqrL7ng/1 –
This is not an option, because the SVG Element needs to respond to size changes that can not keep the aspect ratio. Just the text needs to keep the ratio, everything else should be as responsive as possible.
EDIT
Switching the svg argument of perserveAspectRatio from "none" to "xMidYMid" keeps the aspect ratio of the SVG, but the desired effect is, that the SVG itself does not keep it's aspect ratio, but the -tags do. Which means the following would NOT be a solution:
<div class="function height3x svg-container" style="height: 112px; width: 200px;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="mySVG" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background-color: whitesmoke">
<g class="function" id="keyboard_btn_24">
<polygon id="ok" points="25,25 75,25 75,75 25,75"></polygon>
<text id="ok_text" x="39" y="55">OK</text>
</g>
<g class="function" id="keyboard_btn_25" preserveAspectRatio="xMidYMid">
<polygon id="up" stroke="black" stroke-width="0.1" points="0,0 100,0 65,35 35,35"></polygon>
<text x="42" y="20"></text>
</g>
<g class="function" id="keyboard_btn_26">
<polygon id="right" stroke="black" stroke-width="0.1" points="100,0 100,100 65,65 65,35"></polygon>
<text x="81" y="53"></text>
</g>
<g class="function" id="keyboard_btn_27">
<polygon id="down" stroke="black" stroke-width="0.1" points="0,100 35,65 65,65 100,100"></polygon>
<text x="42" y="91"></text>
</g>
<g class="function" id="keyboard_btn_28">
<polygon id="left" stroke="black" stroke-width="0.1" points="0,0 35,35 35,65 0,100"></polygon>
<text x="5" y="53"></text>
</g>
</svg>
</div>
/EDIT
Thanks in advance.
I know this is an old question but I did find a way to do what is asked in pure SVG, no JS, and I've used it in prod without issues!
The trick is to define a parent <svg> element without a viewBox so that it takes the container's dimensions, and then define children <svg> elements for the different kind of preserveAspectRatio values that you want!
In the following snippet, I just took the SVG used in the question and put all the <polygon> apart in a <svg viewBox="0 0 100 100" preserveAspectRatio="none">.
div {
height: 112px;
width: 200px;
}
div > svg {
height: 100%;
width: 100%;
background-color: whitesmoke;
}
polygon {
fill: none;
stroke: black;
stroke-width: 0.1;
}
<div>
<!-- SVG wrapper without viewBox to take parent's dimensions -->
<svg>
<!-- sub SVG that will be resized -->
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<g>
<polygon points="0,0 100,0 65,35 35,35"></polygon>
<text x="42" y="20"></text>
</g>
<g>
<polygon points="100,0 100,100 65,65 65,35"></polygon>
<text x="81" y="53"></text>
</g>
<g>
<polygon points="0,100 35,65 65,65 100,100"></polygon>
<text x="42" y="91"></text>
</g>
<g>
<polygon points="0,0 35,35 35,65 0,100"></polygon>
<text x="5" y="53"></text>
</g>
</svg>
<!-- regular SVG elements that won't be resized -->
<text id="ok_text"
x="50%" y="50%"
text-anchor="middle"
alignment-baseline="middle">
OK
</text>
</svg>
</div>
PS: the end result can even be used as the src of a regular image <img src="./my-weird-responsive-svg.svg" /> which makes this trick really robust!
Questions: How can you make the tag keep it's aspect ratio, while changing the aspect ratio of the svg?
You cannot. If the text is part of the SVG it gets scaled with the SVG. There is no way to make a part of the SVG exempt from the scaling.
Possible solutions:
(1) Remove the text from the SVG and position it on top. For example use a positioned <div> in your HTML or something.
(2) Use JS to calculate the aspect ratio of the SVG and apply an inverse scaling transform to the <text> element.
If you have javascript control on the current dimensions (like going fullscreen, for instance, or simply by checking what viewport size the user is using), you can add a simple class in a parent div outside the SVG.
Then, style the SVG text's font-size for both cases: when the parent div has such class (it tells you that your svg has scaled), and when the parent div hasn't such a class (i.e., the SVG is non-scaled). If this is your case, this simple solution works.
.svg_text {font-size: 12px;} /* normal non-scaled SVG */
.case_for_big_screen_thus_SVG_scaled .svg_text {font-size: 6px;} /* this parent class only is added when viewport dimensions make your SVG to be scaled */
I created a SVG file contains 5 polygons, then I need to embed Javascript so 4 of the polygons' color changes to Red when mouseover, and when mouseout, the color changes to Green. I tried to write the code but it didn't work, what could be the problem? Thanks for help and tips!
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="26cm" height="24cm" viewBox="0 0 2600 2400" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink= "http://www.w3.org/1999/xlink">
<script type="text/javascript">
<![CDATA[
document.getElementById("test").onmouseover = function(){changeColor()};
function changeColor() {
document.getElementById("test").style.color = "red";
}
document.getElementById("test").onmouseout = function(){changeColor()};
function changeColor() {
document.getElementById("test").style.color = "green";
}
]]>
</script>
<circle cx="1600" cy="700" r="600" fill="yellow" stroke="black" stroke-width="3"/>
<ellipse id="test" cx="1300" cy="500" rx="74" ry="120" fill="blue" stroke="black" stroke-width="3" onmouseover="javascript:red();" onmouseout="javascript:green();"/>
<ellipse id="test" cx="1850" cy="500" rx="74" ry="120" fill="blue" stroke="black" stroke-width="3" onmouseover="javascript:red();" onmouseout="javascript:green();"/>
<rect id="test" x="1510" y="650" width="160" height="160" fill="blue" stroke="black" stroke-width="3" onmouseover="javascript:red();" onmouseout="javascript:green();"/>
<polygon id="test" points="1320,800 1370,1080 1820,1080 1870,800 1820,1000 1370,1000" name="mouth" fill="blue" stroke="black" stroke-width="3" onmouseover="javascript:red();" onmouseout="javascript:green();"/>
</svg>
For what you are doing I would recommend using pure CSS.
Here is some working code.
svg:hover .recolor {
fill: red;
}
As you see, you can just use the :hover event in CSS to recolor the necessary elements. And set them to your default color (green), which will take effect when the user is not hovered.
You have various errors
you've two functions called changeColor, functions must have unique names
SVG does not use color to colour elements, instead it uses fill (and stroke).
id values must be unique, you probably want to replace id by class and then use getElementsByClassName instead of getElementById. If you do that you'll need to cope with more than one element though. I've not completed that part, you should try it yourself so you understand what's going on.
I've removed all but one id from my version so you can see it working on the left eye.
document.getElementById("test").onmouseover = function(){changeColor()};
function changeColor() {
document.getElementById("test").style.fill = "red";
}
document.getElementById("test").onmouseout = function(){changeColor2()};
function changeColor2() {
document.getElementById("test").style.fill = "green";
}
<svg width="26cm" height="24cm" viewBox="0 0 2600 2400" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink= "http://www.w3.org/1999/xlink">
<circle cx="1600" cy="700" r="600" fill="yellow" stroke="black" stroke-width="3"/>
<ellipse id="test" cx="1300" cy="500" rx="74" ry="120" fill="blue" stroke="black" stroke-width="3"/>
<ellipse cx="1850" cy="500" rx="74" ry="120" fill="blue" stroke="black" stroke-width="3" />
<rect x="1510" y="650" width="160" height="160" fill="blue" stroke="black" stroke-width="3" />
<polygon points="1320,800 1370,1080 1820,1080 1870,800 1820,1000 1370,1000" name="mouth" fill="blue" stroke="black" stroke-width="3"/>
</svg>
I am trying to customize one of the D3 JS samples but am stuck on how to add complex graphics to it.
This is the script I am trying to modify: http://bl.ocks.org/jmgimeno/1665141
I want to add better graphics for the handler at the bottom.
Something like how the iPhone video edit control looks like: http://bit.ly/ZDjnOq
Now, I guess, the only option to do that would be to use complex SVG graphics.
So I created a SVG file for a graphics control that looks similar to iPhone control.
My SVG file looks like this:
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="37.5px"
height="20.25px" viewBox="0 0 37.5 20.25" enable-background="new 0 0 37.5 20.25" xml:space="preserve">
<g id="Layer_2">
</g>
<g id="Layer_1">
<path fill="none" stroke="#F28A1A" stroke-miterlimit="10" d="M34.442,15.665c0,1.565-1.27,2.835-2.835,2.835H5.594
c-1.565,0-2.835-1.27-2.835-2.835V3.834C2.759,2.269,4.028,1,5.594,1h26.014c1.565,0,2.835,1.269,2.835,2.834V15.665z"/>
<g>
<path fill="#FFFFFF" stroke="#626161" stroke-width="0.25" stroke-miterlimit="10" d="M4.342,12.298
c0,0.874-0.709,1.583-1.584,1.583l0,0c-0.874,0-1.583-0.709-1.583-1.583V7.131c0-0.874,0.709-1.583,1.583-1.583l0,0
c0.875,0,1.584,0.709,1.584,1.583V12.298z"/>
<line fill="none" stroke="#626161" stroke-width="0.25" stroke-miterlimit="10" x1="1.883" y1="9.715" x2="3.466" y2="9.715"/>
<line id="XMLID_16_" fill="none" stroke="#626161" stroke-width="0.25" stroke-miterlimit="10" x1="1.883" y1="8.976" x2="3.466" y2="8.976"/>
<line id="XMLID_15_" fill="none" stroke="#626161" stroke-width="0.25" stroke-miterlimit="10" x1="1.883" y1="10.369" x2="3.466" y2="10.369"/>
</g>
<g>
<path fill="#FFFFFF" stroke="#626161" stroke-width="0.25" stroke-miterlimit="10" d="M36.025,12.298
c0,0.874-0.709,1.583-1.584,1.583l0,0c-0.874,0-1.583-0.709-1.583-1.583V7.131c0-0.874,0.709-1.583,1.583-1.583l0,0
c0.875,0,1.584,0.709,1.584,1.583V12.298z"/>
<line fill="none" stroke="#626161" stroke-width="0.25" stroke-miterlimit="10" x1="33.566" y1="9.715" x2="35.149" y2="9.715"/>
<line id="XMLID_14_" fill="none" stroke="#626161" stroke-width="0.25" stroke-miterlimit="10" x1="33.566" y1="8.976" x2="35.149" y2="8.976"/>
<line id="XMLID_13_" fill="none" stroke="#626161" stroke-width="0.25" stroke-miterlimit="10" x1="33.566" y1="10.369" x2="35.149" y2="10.369"/>
</g>
</g>
</svg>
Somehow, I am not able to see the SVG graphics when I use the above code.
Do I need some simpler form of the SVG? or is there something more to it.
The complex paths can be rendered by putting the svg element information into arrays that d3 can use as data:
http://bl.ocks.org/AndrewStaroscik/5220771