How to highlight the entire map using svg in HTML file? - javascript

this is coding for map. If i mouse over the map it highlight only half of the state is displayed. i need to highlight the full state. How to do it? can anyone help me with codings...
her is our HTML coding:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.js">
var aid;
var disid;
var but;
var hovid;
</script>
<title>Sample Map</title>
<style type="text/css">
.button {
list-style-type: none;
padding: 0;
margin: 0;
width: 100px;
font-family:"Arial", Helvetica, Sans-serif;
font-size:14px;v
font-weight: bold;
}
</style>
</head>
<body>
<div>
<!-- <p><a><button class="button" onclick="getid('VA','1','VA1','46','')";>Zoom</button></a></p> -->
<p><a><button class="button" onclick= "sample.style.zoom='2300%'">Zoom</button></a></p>
<button class="button"onclick= "sample.style.zoom='100%'">Zoom Out</button>
</div>
<!-- <table>
<tr>
<td> --> <div id="sample"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="700" height="500">
<polyline fill="#c0c3c5" id="KY1" title="Kentucky" alt="Kentucky" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" points="
500.441,263.861 519.982,261.672 527.197,259.595 527.905,257.709 530.413,256.524 530.479,255.049 532.128,253.862
532.072,252.457 540.856,244.216 540.864,244.264 538.589,244.089 537.851,243.049 536.241,242.449 535.75,240.996
533.173,238.515 533.231,237.692 530.597,234.998 531.316,233.435 530.781,230.627 530.781,230.627 528.975,228.691
527.19,228.215 525.973,225.548 524.385,226.236 523.034,228.147 521.104,228.767 518.115,227.233 516.802,227.828
516.454,228.738 515.22,228.559 513.299,226.783 508.794,226.435 507.269,223.303 505.197,221.858 503.135,222.735
501.486,221.724 499.633,223.385 500.554,224.641 500.064,225.881 501.259,226.137 501.105,227.831 498.844,228.127
496.451,229.948 495.07,229.116 492.96,229.656 493.607,232.788 491.278,234.587 490.614,237.195 488.653,237.714 487.86,239.469
487.837,241.85 486.289,243.296 483.179,241.962 482.883,240.586 481.676,239.776 482.273,240.805 480.57,241.011 480.997,241.997
479.969,242.69 480.156,244.352 479.224,244.76 478.745,245.989 478.408,245.047 477.161,245.259 475.939,243.798 473.506,245.307
472.427,247.555 468.408,245.295 466.396,245.884 465.938,244.891 466.096,246.879 465.344,247.479 464.821,246.169
463.313,246.82 462.113,245.998 461.558,246.416 462.041,247.836 461.383,248.588 460.169,248.138 458.925,250.765
460.069,253.706 454.872,255.64 454.62,257.494 455.961,259.672 454.62,261.216 448.309,258.937 446.057,261.607 446.887,263.396
446.925,266.685 445.605,270.267 443.757,269.407 442.896,271.563 461.841,270.314 461.136,267.126 464.089,267.174
464.391,267.746 481.355,266.352 481.978,265.647 500.441,263.861" onmouseover="getstate('KY','17','','KY1');" onmouseout="onout('KY1');"><title>Kentucky</title></polyline>
<polyline fill="#c0c3c5" id="OH1" title="Ohio" alt="Ohio" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" points="
545.233,168.086 533.923,176.797 530.205,177.313 526.158,179.271 521.791,179.139 521.14,178.462 519.449,178.738
518.338,178.549 516.531,177.317 513.018,176.452 495.778,178.437 500.535,222.528 501.486,221.724 503.135,222.735
505.197,221.858 507.269,223.303 508.794,226.435 513.299,226.783 515.22,228.559 516.454,228.738 516.802,227.828
518.115,227.233 521.104,228.767 523.034,228.147 524.385,226.236 525.973,225.548 527.19,228.215 528.975,228.691
530.781,230.627 534.104,229.693 534.405,227.264 535.615,226.61 534.705,223.909 536.431,219.708 537.908,219.829
538.283,221.624 539.354,220.335 540.222,220.539 539.172,218.129 539.979,217.634 539.759,216.364 540.446,214.741
541.875,214.269 543.063,211.814 544.403,212.763 546.07,211.648 549.936,207.213 550.254,205.473 549.648,204.752
550.342,203.011 550.119,202.119 550.712,201.92 550.564,199.059 551.643,195.083 551.105,193.692 551.299,192.52 550.067,190.643
550.456,189.982 551.832,189.336 551.869,189.331 548.445,167.054" onmouseover="getstate('OH','35','','OH1');" onmouseout="onout('OH1');"><title>Ohio</title></polyline>
<polyline fill="#c0c3c5" id="TN1" title="Tennessee" alt="Tennessee" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" points="
547.005,258.142 519.982,261.672 481.978,265.647 481.355,266.352 464.391,267.746 464.089,267.174 461.136,267.126
461.841,270.314 442.896,271.563 442.566,272.441 442.116,270.633 441.231,270.85 441.993,273.718 440.677,274.601
441.598,275.787 439.899,276.097 441.156,277.86 439.612,280.212 440.607,281.83 439.073,282.184 439.889,282.889 439.577,283.445
436.892,284.996 437.67,286.516 436.927,287.202 437.466,288.361 436.222,288.641 434.894,291.565 435.431,295.197
434.263,295.366 433.888,296.621 432.572,297.281 461.637,295.572 496.773,292.57 514.591,290.681 514.564,287.004
515.268,286.275 517.391,286.089 517.988,283.31 519.572,281.555 521.415,280.522 524.753,280.015 528.858,276.253
531.123,275.589 532.06,273.732 531.916,272.61 533.325,272.756 533.646,271.518 535.344,270.267 536.552,271.847 539.736,268.385
540.869,267.848 542.748,268.568 544.534,264.847 545.677,263.764 547.03,263.848 546.424,262.896 546.94,261.359 546.537,260.654
547.005,258.142" onmouseover="getstate('TN','42','','TN1');" onmouseout="onout('TN1');"><title>Tennessee</title></polyline>
</svg> </div> <!--</td>
</tr>
</table> -->
<script type="text/javascript" >
function getstate(aid,disid,but,hovid) {
var elem = document.getElementById(hovid);
elem.setAttributeNS(null,"stroke","#404040");
elem.setAttributeNS(null,"stroke-width","2.35");
}
function onout(hovid) {
var elem1 = document.getElementById(hovid);
elem1.setAttributeNS(null,"stroke","#FFFFFF");
elem1.setAttributeNS(null,"stroke-width","2.35");
}
</script>
</body>


This has to do with a layering order. Your middle state is buried under the other two. To bring it to top so that the border shows up topmost, you have to insert the element last.
A quickfix would be to give your element an ID: <svg id="id_svg" ...
Then in your getstate() function, insert this at the end:
document.getElementById('id_svg').appendChild( elem );
A possibly better way to handle this set of complexities is to use a library such as raphaeljs. It fixes many annoyances, and is cross-browser compatible.
For example, see this fiddle: http://jsfiddle.net/3345Q/

Related

How to click svg using querySelector?

I am trying to build a chrome extension to click an SVG on a webpage using the below command but it shows that "click" is not a function.
Can anyone give me some direction in order to solve this issue?
document.querySelector("div[class^='SubmitChat__SubmitButton']").querySelector("svg > path(0)").click();
<form class="SubmitChat__SubmitChatWrapper-kLTVjd ezNulO">
<div id="PinToTop" style="display: none; border: groove; margin: 5px; padding: 5px;"></div>
<div class="DefaultComments__DefaultCommentsWrapper-drohEF dbvkCO">
<div class="SubmitChat__TextAreaWrapperBox-ijaLYA uQa-DJ">
<textarea data-track-category="Interaction_Comment" data-track-action="click" data-track-name="field_comment" class="SubmitChat__TextAreaWrapper-cEDMAF joGtiU" style="height: 44px;"></textarea>
</div>
<div class="SubmitChat__SubmitButton-kXYuum kSQpDq">
<span class="isvg loaded SubmitChat__SendMessageIcon-hzVurU lcJXRC">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<path d="M25.305 16.07L7.503 24.307a.802.802 0 01-1.111-.925l1.923-7.493h0L6.392 8.396a.8.8 0 011.111-.925l17.802 8.236a.2.2 0 010 .363zm-16.638-.181h16" fill="none" stroke="#28232D" stroke-linecap="round" stroke-width="1.5">
</path>
</svg>
</span>
</div>
</div>
</form>

You can't really click an svg path but here is a solution:
const pathElem = document.querySelector("div[class^='SubmitChat__SubmitButton'] svg > path")
pathElem.onclick = () => console.log("clicked")
pathElem.dispatchEvent(new Event("click"))
pathElem.dispatchEvent(new Event("click"))
<form class="SubmitChat__SubmitChatWrapper-kLTVjd ezNulO">
<div id="PinToTop" style="display: none; border: groove; margin: 5px; padding: 5px;"></div>
<div class="DefaultComments__DefaultCommentsWrapper-drohEF dbvkCO">
<div class="SubmitChat__TextAreaWrapperBox-ijaLYA uQa-DJ">
<textarea data-track-category="Interaction_Comment" data-track-action="click" data-track-name="field_comment" class="SubmitChat__TextAreaWrapper-cEDMAF joGtiU" style="height: 44px;"></textarea>
</div>
<div class="SubmitChat__SubmitButton-kXYuum kSQpDq">
<span class="isvg loaded SubmitChat__SendMessageIcon-hzVurU lcJXRC">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<path d="M25.305 16.07L7.503 24.307a.802.802 0 01-1.111-.925l1.923-7.493h0L6.392 8.396a.8.8 0 011.111-.925l17.802 8.236a.2.2 0 010 .363zm-16.638-.181h16" fill="none" stroke="#28232D" stroke-linecap="round" stroke-width="1.5">
</path>
</svg>
</span>
</div>
</div>
</form>
Note that .click() works with HTML but not SVG elements. MDN
Also note that the click event handler in your case is probably not listening on the path element but rather on the svg, div or span tag.

How to get parent object ID when clicking on ellipse element?

If I'm interpreting correct hierarchy of elements, what I'm wanting to do would be ...
That element <ellipse> children of <svg>, <object> and <div id="svg_*"> when clicked showed me the id of your <object> parent.
this * is because the <ellipse> will be from your respective svg div.
This is how my HTML strtucture is, thoses #DOCUMENT are window.frames opened by each <object> tag.
<body>
<div id="content">
<div class="header"></div>
<nav class="nav"></nav>
<div class="div 1"></div>
<div class="div 2">
<div id="svg_1">
<object id="OneNameObject" data="../folder/fileOne.svg">
#DOCUMENT
<svg>
<ellipse>I have one addEventerLinster Click here</ellipse>
</svg>
</object>
</div>
<div id="svg_2">
<object id="TwoNameObject" data="../folder/fileTwo.svg">
#DOCUMENT
<svg>
<ellipse>I have one addEventerLinster Click here</ellipse>
</svg>
</object>
</div>
</div>
<div class="div 3"></div>
<div class="div 4"></div>
</div>
For now I'm getting access to the <object> id when I specify the index of it to be used.
0 for svg_1 #document
1 for svg_2 #document
So I thought I'd use the this selector to call the ellipse hireararchy. But I could not, and i don't know how.
something like :
this.parent.document.querySelector('object').id;
This is the way i getting the id using index, and by this - for sure - i aways get the id from selected <object>.
window.onload = function (){
//This is for addEventLinster on each <ellipse>.
var obj = document.querySelectorAll('object');
for (var x = 0; x < obj.length; x++){
var svg = obj[x].contentDocument.querySelector('svg');
var e = svg.querySelectorAll('ellipse');
for ( var i = 0; i < e.length; i++){
e[i].addEventListener('click', function(){
var objId = parent.document.getElementsByTagName('object')[0].id;
alert( objId );
});
}
}
};
Working Example \ but not functional on my context.
This code is working, but it's not on my context ! Need to get that info, I am using <object> data attr to load svg files, they come on embed tags with a new window frame and a new document page. That is why i cant get they elements so easy.
Image HTML Code / DOM painel - * detail : ellipses is on <g> tag.
$(document).ready(function(){
var obj = $('ellipse');
obj.on('click', function(){
alert($(this).parents('object').attr('id'));
});
});
div {
width: 52px;
margin: 2px;
border-radius: 10%;
}
#svg_1:hover, #svg_2:hover {
opacity: 0.7;
}
#svg_1 {
border: 2px solid indianred;
}
#svg_2 {
border: 2px solid lightblue;
}
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="content">
<div class="header"></div>
<nav class="nav"></nav>
<div class="div 1"></div>
<div class="div 2">
<div id="svg_1">
<object id="redObject" data="">
<!-- #DOCUMENT -->
<svg width="50" height="48" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<ellipse ry="14" rx="13" id="svg_2" cy="25" cx="25" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#cd5c5c" fill="#bf2a2a"/>
</svg>
</object>
</div>
<div id="svg_2">
<object id="blueObject" data="">
<!-- #DOCUMENT -->
<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<ellipse ry="14" rx="13" id="svg_2" cy="25" cx="25" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#c95c5c" fill="#56aaff"/>
</svg>
</object>
</div>
</div>
<div class="div 3"></div>
<div class="div 4"></div>
</div>
</body>
</html>
ps; I found the title of the question a bit confusing, in case someone has a better suggestion, I would appreciate it!

Give the below a try. (Not a tested code but should ideally work unless some syntax issues or so)
We can check if something can unnecessary can be removed.
$.each($('[id^="svg_"]'),function(){
var eclipse = $(this).find("object").find('svg').find('ellipse');
console.log(eclipse)
$(eclipse).click(function (){
alert($(this).parent().parent().attr('id'))
})
});

Scroll based animation working outside of defined area

So I'm super new with JS. I'm trying to get a scroll animation to work only in a designated area but instead my "position: fixed" tag is causing it to appear at the top of my site and scroll all the way through it instead of the animation starting and and working only in it's defined frame.
Any ideas how I could fix this?
Here's what it looks like (it's the Iron Man helmet, pardon the unfinished site): http://frontlinecreative.co/test-page/
Here's the code I'm working with:
$(document).ready(function() {
//variable for the 'stroke-dashoffset' unit
var $dashOffset = $(".path").css("stroke-dashoffset");
//on a scroll event - execute function
$(window).scroll(function() {
//calculate how far down the page the user is
var $percentageComplete = (($(window).scrollTop() / ($("html").height() - $(window).height())) * 100);
//convert dashoffset pixel value to interger
var $newUnit = parseInt($dashOffset, 10);
//get the value to be subtracted from the 'stroke-dashoffset'
var $offsetUnit = $percentageComplete * ($newUnit / 100);
//set the new value of the dashoffset to create the drawing effect
$(".path").css("stroke-dashoffset", $newUnit - $offsetUnit);
});
});
svg {
position: fixed;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 50%;
max-width: 580px;
max-height: 440px;
display: block;
}
.path {
stroke-dashoffset: 2000;
stroke-dasharray: 2000;
}
.frame {
height: 3000px;
width: 100%;
display: block;
}
<div class="frame"></div>
<svg viewBox="-2 -2 236 342" version="1.1">
<g stroke="#fff" stroke-width="2" fill="none">
<path class="path" d="M5.63276137,182.54231 C6.80194953,193.172437 6.3213287,203.463688 8.78389181,213.305988 C10.8893725,221.721111 17.2164459,227.370951 20.3046414,235.047931 C22.6954227,240.991202 26.777593,245.814282 29.6168696,251.304822 C35.2175982,262.135407 56.0371828,337.714307 56.0371828,337.714307 L132.704815,337.714307 C132.704815,337.714307 160.705733,315.283257 173.036553,307.661609 C182.772217,301.64402 198.272915,283.720624 198.272915,283.720624 C198.272915,283.720624 206.932701,245.86977 214.495314,229.699603 C217.836426,222.555731 220.443269,212.466228 222.464701,200.907166 C222.48683,200.780625 223.103167,200.325007 223.266634,200.163245 C223.681908,199.7523 223.934824,199.476798 224.4066,198.785907 C225.002278,197.913567 225.542985,196.991182 225.943324,196.093396 C226.210144,195.495036 226.511624,194.766691 226.738562,194.309912 C227.147039,193.487729 227.618919,191.858807 227.823369,191.187781 C228.253181,189.777088 228.495384,189.025237 228.650347,188.166614 C228.683934,187.980515 230.030425,182.597722 230.883627,176.052008 C231.263252,173.139547 231.535873,170.000075 231.687372,166.980798 C231.753545,165.661991 231.803387,164.400955 231.888486,163.157758 C232.04826,160.823641 231.98299,158.213817 231.974911,155.880066 C231.957094,150.733641 231.600491,145.751759 231.121789,141.324454 C230.120098,132.060257 228.59446,125.32839 228.59446,125.32839 C228.59446,125.32839 228.650347,120.08005 228.650347,117.658292 C228.650347,108.520701 224.714553,97.0342203 223.830314,89.1118744 C218.874905,44.7138416 207.944892,26.1540212 179.03144,14.5543922 C163.897012,8.4826969 139.335592,0 117.79845,0 C79.2072247,0 35.7979014,21.0164772 12.5429347,54.868483 C3.90403848,67.4440326 4.65665878,81.6018722 1.51397958,97.2334808 C-2.23398125,115.875745 1.51397953,136.521269 1.51397953,157.8 C1.51397953,166.642709 4.70375912,174.095923 5.63276137,182.54231 Z"></path>
<ellipse class="path" cx="220.310078" cy="157.2" rx="11.6899225" ry="44.4"></ellipse>
<ellipse class="path" cx="223.607235" cy="158.1" rx="8.39276486" ry="35.7"></ellipse>
<path class="path" d="M205.16142,257.069968 L204.02662,251.721838 C203.200382,247.827911 201.39308,241.665666 199.983114,237.940156 L186.169296,201.440316 L167.312606,243.098893 L151.529633,274.897142 L149.316556,280.136082 L132.515841,296.568444 L115.514765,285.903702 L55.6979359,286.309327 L51.840989,287.936383 L49.891546,293.800765 L39.4806764,280.264684"></path>
<path class="path" d="M194.337627,181.231481 L186.176483,201.202524 L177.196317,213.410805 L163.81206,230.377018 C161.351205,233.496459 157.905145,238.90214 156.109916,242.461162 L153.013738,248.599303 C151.220818,252.153751 149.533749,258.250134 149.245749,262.213442 L148.266938,275.683325 L132.12878,290.819054 L120.219641,280.287181 L49.4682501,281.898244 L46.8615659,290.032871"></path>
<path class="path" d="M50.6622452,318.41541 L57.7265898,310.781263 L72.2413693,310.197892 L74.0673855,305.346346 L92.8443872,304.762976 L94.0624903,310.047492 L111.268481,310.047492 L141.060777,319.315335 L178.093387,284.13536 L162.838638,294.929993 L149.217245,280.096174"></path>
<ellipse class="path" transform="translate(192.733850, 263.100000) rotate(14.000000) translate(-192.733850, -263.100000) " cx="192.73385" cy="263.1" rx="2.69767442" ry="5.1"></ellipse>
<path class="path" d="M174.026355,12.6174134 L169.487865,17.2932552 C166.718666,20.1462603 162.779378,25.2030573 160.689513,28.5874508 L157.323962,34.037732 L165.99062,38.6966084 C169.494422,40.5801238 174.835467,44.1301036 177.932696,46.6358384 L183.991501,51.5375611 L183.847056,57.9405908 C183.757357,61.9168514 183.206733,68.3328583 182.619024,72.2589855 L179.849992,90.7572128 L177.544308,106.765455 C176.977025,110.704073 175.900421,117.053408 175.135484,120.96839 L171.762371,138.232152 L180.930381,153.944907 L188.527514,111.891792 C189.235297,107.973933 190.773363,101.716226 191.956657,97.9347013 L193.54097,92.8716128 C194.72705,89.0811835 196.930253,83.0317212 198.458885,79.3671372 L213.050991,44.385537"></path>
<path class="path" d="M141.282422,2.63668846 L134.791041,9.77822094 L127.684098,18.1905018 L124.820956,23.1431151 L145.475765,29.5078751 L157.509038,34.082202"></path>
<path class="path" d="M10.5768439,58.0315472 L29.4327053,42.7882975 L36.781002,29.1745233"></path>
<path class="path" d="M29.56377,42.6492435 L37.8613285,37.8727934 C41.306665,35.8895019 47.156121,33.2736542 50.9447853,32.0240882 L56.9968728,30.0280067 L57.8640635,27.4624913 C59.137839,23.6941265 61.8466982,17.8819889 63.9130079,14.4831233 L65.5380282,11.8101329"></path>
<path class="path" d="M57.0513462,29.8705525 L54.0239924,38.7547732 L52.6332444,46.5628977 C52.6332444,46.5628977 69.9714804,40.2595769 80.2869593,39.6062984 C90.6024382,38.9530199 114.526118,42.6432265 114.526118,42.6432265 L124.725047,23.3094344"></path>
<path class="path" d="M52.7116579,46.2577505 L49.3293853,63.3187359 C48.5567286,67.2161995 47.6756075,73.5895679 47.3607301,77.561825 L45.4061251,102.219657 C45.4061251,102.219657 61.1449509,104.931583 69.319265,104.496676 C77.4935791,104.061769 94.4520096,99.6102157 94.4520096,99.6102157 L102.202953,74.4 L107.524761,59.2531816 C108.842522,55.5025957 111.275031,49.5371778 112.953978,45.9375024 L114.417028,42.8007119"></path>
<path class="path" d="M60.9313742,43.6619838 L53.9634453,67.9691317 L48.7626755,89.2363215 L45.5140222,102.108393"></path>
<path class="path" d="M194.33998,181.375592 L193.480419,177.510239 L180.939272,153.902647 L169.1131,167.786098 L143.405581,182.693266 C139.962313,184.689934 133.943345,186.36864 129.963469,186.44273 L105.939512,186.889966 C101.958906,186.964071 96.1166601,185.61665 96.1166601,185.61665 L96.1166601,185.61665 L94.7940983,177.246507 L50.3680122,179.617432 L47.7784613,188.841251 L42.0031511,189.604686 C38.0627842,190.12556 31.6558219,190.403409 27.6729275,190.224385 L22.7400068,190.00266 C18.7660097,189.824036 13.1719692,187.489732 10.2513565,184.794373 L5.25954168,180.187554"></path>
<path class="path" d="M2.09570264,164.827353 L10.5682255,169.574582 L26.6388817,172.732065 L45.412635,175.724716 L50.2845093,179.595116 L94.9253624,177.240092 L102.085958,172.184268 L124.740298,165.946289 L145.350303,159.092409 L153.539474,156.332695 L161.876527,167.044376 L169.458159,167.336156"></path>
<path class="path" d="M194.385725,181.150376 L191.447818,185.416533 C189.191398,188.693095 185.005161,193.561922 182.113478,196.276452 L174.985753,202.96751 L162.948539,214.650889 L154.50711,223.72649 C151.799555,226.637452 147.732625,231.626007 145.423648,234.868344 L130.549467,255.755136 C128.240365,258.99765 125.362594,264.684165 124.119589,268.463008 L120.235465,280.271072"></path>
<path class="path" d="M18.5087527,231.394093 L29.6506505,248.67255 L39.6642394,263.888481 L46.084218,276.550986 L49.5900589,282.203661"></path>
<path class="path" d="M183.95317,51.47048 C183.95317,51.47048 187.731927,43.9277824 190.453645,40.9662534 C193.233164,37.9418299 194.486825,37.5379936 194.486825,37.5379936 C197.783995,35.3148427 203.260042,35.107404 206.716031,37.0735931 L210.103507,39.000803"></path>
<path class="path" d="M97.5555478,175.606778 L98.0699842,176.910075 C99.5300542,180.609083 103.912979,183.243725 107.866873,182.793875 L130.153205,180.258275 C134.103808,179.8088 140.186208,177.990916 143.737456,176.198508 L161.783437,167.090228"></path>
<path class="path" d="M10.6238966,169.76763 L12.2334207,176.49703 C13.1595567,180.369193 17.1300117,183.615853 21.1105843,183.748946 L48.968031,184.680377"></path>
</g>
</svg>
To say I'm stuck would be an understatement.
Thanks!

The SVG content is not in the 'frame' div. Move the closing </div> tag from the first line of code to the last.

I think the answer to this question Using jQuery to keep scrolling object within visible window will help you out. Basically, take away the fixed position in the css and then set the position propery to fixed using jQuery inside of the scroll event handler once the user has scrolled far enough. Also, don't start the drawing animation until then either.
I hope that helps!

Is is possible to use javascript to mix 2 SVG files in one resulting an HTML/HTML5?

I'm creating a software that uses an embedded browser to show SVG files (HTML/HTML5 with SVG).
A lot of SVG files would have a lot in common, so I'd like to avoid copying that part to all SVG files. I'd like to provide a base SVG to be extended/included. Lets call the base SVG "base.svg".
I searched for something like INCLUDE in SVG but it doesn't exist.
Is it possible to create a HTML file that has an HTML5 link element, or javascript code to include the base.svg?
Then I'd simply put the rest of SVG in the HTML. Something like this (pseudo):
<html>
<body>
<link rel="import" href="base.svg" />
<!-- or some javascript code to include the base.svg content -->
<svg>
<!-- The rest of the SVG -->
</svg>
</body>
</html>
Is it possible?
If not, is it a good choice to use a PHP server (or something like this) to generate the complete SVG dynamically (result = base.svg + rest.svg)?
Thanks very much.
=== Solution (based on Francis Hemsher approach):
HTML file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Combine/Parse SVG Files via XML DOM</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body style='padding:0px;font-family:arial'>
<center>
<h4>Combine/Parse SVG Files via XML DOM</h4>
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:6px;'>
Load svg files as XML via <b>XMLHttpRequest</b>. Parse the Document Elements to create a client's file.
This example first loads the <b>Base.svg</b> inline into a DIV, then extracts/adds elements from another <b>companion</b> svg file,
combining them into a seamless svg root.
</div>
<br />
Base + Companion SVG:
<textarea id=svgValue style='width:90%;height:100px;font-size:120%;font-family:lucida console;'></textarea>
<div id="svgDiv" style='background-color:white;width:400px;height:400px;' ></div>
<br />
Parameters:
<br />
<textarea id=jsParams style='border-radius:26px;font-size:110%;font-weight:bold;color:midnightblue;padding:16px;background-color:beige;border-width:0px;font-size:100%;font-family:lucida console;width:90%;height:40px'></textarea>
<br />
Javascript:
<br />
<textarea id=jsValue style='border-radius:26px;font-size:110%;font-weight:bold;color:midnightblue;padding:16px;background-color:beige;border-width:0px;font-size:100%;font-family:lucida console;width:90%;height:400px'></textarea>
</center>
<script id="parameterRetrieval">
var params = new Array();
function queryParameters() {
var query = window.location.search.substring(1);
var lParams = query.split('&');
for (var i = 0; i < lParams.length; ++i) {
var pos = lParams[i].indexOf('=');
if (pos > 0) {
var key = lParams[i].substring(0, pos);
var val = lParams[i].substring(pos + 1);
params[key] = val;
console.log("params[ " + key + " ] = \"" + val + "\"");
}
}
}
function getParameterByName(key) {
return params[key];
}
</script>
<script id="SVGComposer">
var XMLdoc;
function loadCompanionXML() {
// Element inside the base SVG file to hold the companion SVG content.
var destElement = getParameterByName("destination");
// Companion SVG name.
var SVGFile = getParameterByName("svg");
if (SVGFile == null) {
console.log("Missing parameter: child svg file (svg).");
return;
}
var loadXML = new XMLHttpRequest;
function handler() {
if ((loadXML.readyState == 4) && (loadXML.status == 200)) {
var childSVG = document.getElementById(destElement);
if (childSVG != null) {
childSVG.innerHTML = loadXML.responseText;
svgValue.value=svgDiv.innerHTML;
} else {
console.log("Could not get the child SVG container.");
}
}
}
if (loadXML != null) {
loadXML.open("GET", SVGFile, true);
loadXML.onreadystatechange = handler;
loadXML.send();
}
}
document.addEventListener("onload", init(), false);
function init() {
queryParameters();
var SVGFile = "base.svg";
var loadXML = new XMLHttpRequest;
function handler() {
if ((loadXML.readyState == 4) && (loadXML.status == 200)) {
svgDiv.innerHTML = loadXML.responseText;
loadCompanionXML();
}
}
if (loadXML != null) {
loadXML.open("GET", SVGFile, true);
loadXML.onreadystatechange = handler;
loadXML.send();
}
jsValue.value = SVGComposer.text;
}
</script>
</body>
</html>
base.svg:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="w3.org/1999/xlink" id="baseSVG" width="400" height="400" fill="white">
<circle r="50" fill="green" cx="50" cy="50" stroke="none" />
<g id="childSVG" />
</svg>
companion.svg:
<defs>
<image id="bkimage" xlink:href="http://placepuppy.it/320/240" width="100%" height="100%" />
<rect id="MyRect" width="100" height="100" stroke="black" stroke-width="2" />
</defs>
<g>
<defs>
<mask id="image1mask" ><polygon points="0,0, 320,0, 160,120, 320,240, 0,240" fill-opacity="30%" /></mask>
</defs>
<use xlink:href="#bkimage" mask="url(#image1mask)"/>
</g>
<use xlink:href="#MyRect" x="100" y="100" fill="red" />
<use xlink:href="#MyRect" x="150" y="150" fill="blue" />
<use xlink:href="#MyRect" x="200" y="200" fill="green" />
<g>
<defs>
<clipPath id="MyRectClip"><rect x="270" y="270" width="60" height="60" /></clipPath>
</defs>
<rect x="250" y="250" width="100" height="100" stroke="black" stroke-width="2" fill="yellow" clip-path="url(#MyRectClip)"/>
</g>
To load it, you should open the following URL:
http://theHTMLfile?svg=companion.svg&destination=childSVG
Ps: I know the coordinates of the image mask are not working very well. Ignore that. It was just a test.
Cheers!

I assume you have access to the XML DOM. If so, the best way to merge the svg is via xml dom methods.
EDIT (added below) UPDATE: added xlink namespace, needed for image elements
Below is a very basic means of combining svg files into a single inline svg on the client. It it can Combine/Parse SVG Files via XML DOM.
Loads svg files as XML via XMLHttpRequest. Parse the Document Elements to create a client's file.
This example first loads the Base.svg inline into a DIV, then extracts/adds elements from another companion.svg file,
combining them into a seamless svg root.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Combine/Parse SVG Files via XML DOM</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body style='padding:0px;font-family:arial'>
<center><h4>Combine/Parse SVG Files via XML DOM</h4>
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:6px;'>
Load svg files as XML via <b>XMLHttpRequest</b>. Parse the Document Elements to create a client's file.
This example first loads the <b>Base.svg</b> inline into a DIV, then extracts/adds elements from another <b>companion</b> svg file,
combining them into a seamless svg root.
</div>
<br />Base + Companion SVG:
<textarea id=svgValue style='width:90%;height:200px;font-size:120%;font-family:lucida console;'></textarea>
<div id="svgDiv" style='background-color:lightgreen;width:400px;height:400px;' ></div>
<br />Javascript:<br />
<textarea id=jsValue style='border-radius:26px;font-size:110%;font-weight:bold;color:midnightblue;padding:16px;background-color:beige;border-width:0px;font-size:100%;font-family:lucida console;width:90%;height:400px'></textarea>
</center>
<script id=myScript>
/*
Base.svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="baseSVG" width="400" height="400">
<circle r="50" fill="green" cx="100" cy="100" stroke="none" />
</svg>
companion.svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="companionSVG">
<rect x="180" y="200" width="200" height="150" fill="red" />
<ellipse cx="70" cy="300" rx="65" ry="25" fill="blue" />
<image x="120" y="100" xlink:href="myImage.png" width="198" height="65" />
</svg>
*/
//--onload---
function loadBaseSVGInline()
{
var SVGFile="Base.svg"
var loadXML = new XMLHttpRequest;
function handler(){
if(loadXML.readyState == 4 && loadXML.status == 200)
{
svgDiv.innerHTML=loadXML.responseText
loadCompanionXML()
}
}
if (loadXML != null){
loadXML.open("GET", SVGFile, true);
loadXML.onreadystatechange = handler;
loadXML.send();
}
}
var XMLdoc
function loadCompanionXML()
{
var SVGFile="companion.svg"
var loadXML = new XMLHttpRequest;
function handler()
{
if(loadXML.readyState == 4 && loadXML.status == 200)
{
//---responseText---
var xmlString=loadXML.responseText
//---DOMParser---
var parser = new DOMParser();
XMLdoc=parser.parseFromString(xmlString,"text/xml").documentElement;
companionXML2Base()
}
}
if (loadXML != null){
loadXML.open("GET", SVGFile, true);
loadXML.onreadystatechange = handler;
loadXML.send();
}
}
//--place companion elements into base
function companionXML2Base()
{
var mySVG=document.getElementsByTagName("svg")[0]
var elems=XMLdoc.childNodes
for(var k=0;k<elems.length;k++)
{
var elem=elems.item(k).cloneNode(true)
mySVG.appendChild(elem)
}
svgValue.value=svgDiv.innerHTML
}
</script>
<script>
document.addEventListener("onload",init(),false)
function init()
{
loadBaseSVGInline()
jsValue.value=myScript.text
}
</script>
</body>
</html>

Can't add events to inline SVG elements

I'm trying to access inline SVG elements in JavaScript, to add a click event. I'm running into issues adding the event to anything else than a single element identified with id.
Using document.getElementById("p1_1_1") will work, but I'll need to manipulate 200 rectangles, so I will need to use document.getElementsByTagName or document.getElementsByClassName - both of which return meaningful HTMLCollections, but the addEvent won't add the event.
I've tried Firefox 17 and Chrome 23, and some additional methods, such as the getElementsByTagNameNS, bu no luck so far.
Thankful for any help you can offer.
Here are stripped down versions of the JS code and HTML/SVG I'm working with:
JavaScript:
function testing() {
var testDiv = document.getElementById("tester");
testDiv.innerHTML = '<h1>Success!</h1><br>';
}
function addEvent(obj, evt, func) {
if (obj.addEventListener) {
obj.addEventListener(evt, func, false)
} else if (obj.attachEvent) {
obj.attachEvent("on" + evt, func);
} else {
alert("no success adding event");
}
}
function init() {
var targetSquares = document.getElementsByTagName("rect");
addEvent(targetSquares, "click", testing);
}
window.addEvent(window, "load", init);
inline SVG
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="bsroyale.js"></script>
</head>
<body>
<div id="tester">
</div>
<div id="gamemap">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 600 600">
<rect x="50" y="50" width="20" height="20" class="p1" id="p1_1_1" />
<rect x="71" y="50" width="20" height="20" class="p1" id="p1_2_1" />
<rect x="92" y="50" width="20" height="20" class="p1" id="p1_3_1" />
<rect x="113" y="50" width="20" height="20" class="p1" id="p1_4_1" />
<rect x="134" y="50" width="20" height="20" class="p1" id="p1_5_1" />
<!-- etc etc, 200 rect in total-->
</svg>
</div>
</body>
</html>

document.getElementsByTagName("rect") returns an HTML collection. You must then loop through this collection (i.e. for each...) and add the event listeners to each collection-item.
I didn't test it, but your init function could look like this:
function init() {
var targetSquares = document.getElementsByTagName("rect");
for (var i = 0; i < targetSquares.length; i++) {
addEvent(targetSquares[i], "click", testing);
}
}

Categories