Issues with conversion of svg element to .svg - javascript
After hours of looking for a solution here and there, I come here to ask for help.
I'm developing a customization module using <svg> element and Javascript.
In the end, I convert and download the SVG element in a .svg file but the problem is that some elements like the <text> ones are not in the right place when opening the file with Illustrator, it doesn't seem to care about the x and y attributes.
When I open the file in a browser, everything is in the right place.
Here is the HTML of the downloaded .svg file I get, all at the right place (the browser read the HTML attributes well I guess) : https://codepen.io/florianeychenne/pen/vYRgMWx
Here is the rendering in Illustrator :
The browser contains it to the first SVG element, which is width="833" height="396". Thats why you don't see the 'Exemple', it is contained to that first SVG tag. Illustrator does not contain anything, as it is not a browser viewport. I think that if you use only 1 SVG tag, it will solve your issue. It should then render the same in both software.
Some ideas for a workaround
convert/combine all transformations to matrix():
this way we circumvent problems with transform-origin (Illustrator
apparently can't use it - rotations will have a wrong pivot point)
convert nested svg elements to <g> group elements
some attributes like textLength won't work at all in AI - you might use a condensed font instead.
Working example
// getTransformToElement polyfill
SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function(
toElement) {
return toElement.getScreenCTM().inverse().multiply(this.getScreenCTM());
};
function fixNestedSvgs() {
let svgs = document.querySelectorAll('svg');
let nested = document.querySelectorAll('svg svg');
// all transformations to matrix()
svgs.forEach(function(svg) {
let children = [...svg.children];
children.forEach(function(child) {
transFormToMatrix(child);
styleToAttribute(child, ['fill', 'stroke', 'stroke-width']);
});
})
// nested to groups
nested.forEach(function(svg) {
let parent = svg.parentNode.closest('svg');
nestedSvgToGroup(svg);
svgMarkup.value = parent.outerHTML;
})
}
// all transformations to matrix()
function transFormToMatrix(el) {
let type = el.nodeName.toLowerCase();
let matrixString = '';
let types = ["path", "polygon", "polyline", "rect", "ellipse", "circle", "line", "text", "g", "svg"];
if (types.indexOf(type) !== -1) {
// get el matrix
let matrix = el.getTransformToElement(el.parentNode.closest("svg"));
let [a, b, c, d, e, f] = [
matrix.a,
matrix.b,
matrix.c,
matrix.d,
matrix.e,
matrix.f
];
matrixString = [a, b, c, d, e, f].join(" ");
//exclude non transformed elements
if (matrixString != "1 0 0 1 0 0") {
el.setAttribute("transform", `matrix(${matrixString})`);
el.removeAttribute("transform-origin");
}
}
return matrixString;
}
// convert fill styles to attributes
function styleToAttribute(el, attributes = ['fill', 'stroke', 'stroke-width']) {
let types = ["path", "polygon", "polyline", "rect", "ellipse", "circle", "line", "text", "g", "svg"];
let type = el.nodeName.toLowerCase();
if (types.indexOf(type) !== -1) {
let style = window.getComputedStyle(el);
attributes.forEach(function(attName) {
let value = style.getPropertyValue(attName);
if (value !== 'rgb(0, 0, 0)') {
el.setAttribute(attName, value);
}
})
}
}
//convert nested svgs to groups
function nestedSvgToGroup(svg) {
let svgSub = svg;
if (svg.parentNode) {
let parent = svg.parentNode.closest('svg');
let svgSubChildren = [...svgSub.children];
let groupMatrix = transFormToMatrix(svgSub);
//replace nested svg with group - apply matrix
let group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
group.classList.add('svgNest');
group.setAttribute('transform', `matrix( ${groupMatrix} )`);
//copy children to group
svgSubChildren.forEach(function(child, i) {
group.appendChild(child);
})
//remove nested svg
svgSub.replaceWith(group);
}
}
svg {
width: 80%
}
<svg class="center" viewBox="0 0 833 396" xmlns="http://www.w3.org/2000/svg">
<style>
#import url("https://fonts.googleapis.com/css2?family=Audiowide&family=Black+Ops+One&family=Faster+One&family=Fugaz+One&family=Racing+Sans+One&display=swap");
.fillColor {
fill: currentColor;
}
.strokeColor {
stroke: currentColor;
fill: none;
stroke-width: 5px;
}
.fillStrokeColor {
stroke: currentColor;
fill: currentColor;
stroke-width: 1px;
}
text {
font-family: 'Fugaz One', cursive;
}
</style>
<rect id="allCarpet" x="0" y="0" width="833" height="396"></rect>
<rect class="fillColor" id="foamCarpet" x="10" y="10" width="813" height="376" style="color:#ffd100"></rect>
<!-- <rect class="fillColor" id="leftLogo" x="22" y="105" width="84" height="187" style="color:white" /> -->
<text class="svg" x="580" y="345" font-size="15" id="topNickname" fill="black" textLength="70"
lengthAdjust="spacingAndGlyphs">FLORIAN</text>
<text class="svg" x="590" y="368" font-size="30" id="topNickname" fill="black" textLength="80"
lengthAdjust="spacingAndGlyphs">FLORIAN</text>
<text class="svg" x="-25" y="55" font-size="60" id="topNumber" fill="black" textLength="80"
lengthAdjust="spacingAndGlyphs" transform="rotate(180)" transform-origin="42px 42px">00</text>
<text class="svg" x="725" y="366" font-size="60" id="botNumber" fill="black" textLength="80"
lengthAdjust="spacingAndGlyphs">00</text>
<svg version="1.1" class="nested" id="Calque_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="1px" y="0px" viewBox="0 0 197 100"
style="enable-background:new 0 0 197 100;" xml:space="preserve" width="150px">
<style type="text/css">
.st0 {
fill: #CA0D25;
}
.st1 {
fill: none;
}
.st2 {
fill: #FF0000;
}
.st3 {
fill: #FEFEFE;
}
</style>
<path class="st1" d="M7.2,3.8v92.5h182.7V3.8H7.2z M186.8,93.2H10.2V6.8h176.5L186.8,93.2L186.8,93.2z"
transform="rotate(90)" transform-origin="center"></path>
<path class="st2" fill="red" d="M66.9,62.1v0.3c-0.1-0.1-0.2-0.2-0.2-0.3H66.9z M73.7,41.5c-5.6,0-6.9,5-6.9,9.6c0,4.6,1.3,9.5,6.9,9.5
c5.2-0.1,6.9-4.7,6.9-9.5C80.5,46.4,78.7,41.6,73.7,41.5z M43.4,53.1c-0.2,0.1-0.5,0.1-0.7,0.1c-2.5,0.5-5.1,1.6-5.1,4.6
c0,3.1,2.1,3.4,4.7,3.4c0.4,0,0.7,0,1.1,0c5.2-0.5,5.7-4.4,5.7-6.1L49,51.5C47.8,52.6,45.7,52.8,43.4,53.1z M186.8,6.8v86.3H10.2
V6.8H186.8z M57.5,66.4c-1.3-1.7-0.9-3.9-0.9-6.6V44.3c0-7.6-7.8-8.4-13.3-8.4c-6.2,0.1-11.9,2.3-12.3,9.5l7.3,0.1
c0.3-2.7,2.1-4,5.1-4.1c2.7,0,5.8,0.3,5.8,4c0,2.4-2.6,2.6-5.8,2.7c-1.4,0-2.8,0.1-4.3,0.3c-4.9,0.7-9.2,2.6-9.2,9.3
c0,5.3,4.1,9.2,9.9,9.2c1.2,0,2.1,0,3.3-0.2l0.3,0c2.2-0.4,4.3-1.3,6-3.1c0,0.9,0.6,1.9,0.9,2.8L57.5,66.4L57.5,66.4z M88.7,51.3
c0-8.5-4.2-16-13.5-16c-0.5,0-1,0-1.5,0.1c-3.1,0.4-5.7,1.8-7.4,4.5h-0.1v-3.1h-6.9v37.8h7.6V62.4c1.6,2.2,4.1,3.6,6.8,4.1
c0.6,0.1,1.3,0.1,2,0.1C84.3,66.7,88.7,59.2,88.7,51.3z M106.1,35.9c-4.3,0-7.1,1.8-8.8,5.5l0-4.8h-7.1v29.8h7.6V53
c0-6.8,3.8-9.5,8.2-9.5L106.1,35.9L106.1,35.9z M116.5,36.7h-7.6v29.7h7.6V36.7z M116.5,25.4h-7.6v6.8h7.6V25.4z M126.5,25.4h-7.6
v41.1h7.6V25.4z M136.7,36.7H129v29.7h7.6V36.7z M136.7,25.4H129v6.8h7.6V25.4z M166.7,66.3c-1.3-1.7-0.9-3.9-0.9-6.6V44.2
c0-7.6-7.8-8.4-13.3-8.4c-6.2,0.1-11.9,2.3-12.3,9.5l7.3,0.1c0.3-2.7,2.1-4,5.1-4.1c2.7,0,5.8,0.3,5.8,4c0,2.4-2.6,2.6-5.8,2.7
c-1.4,0-2.8,0.1-4.3,0.3c-4.9,0.7-9.2,2.6-9.2,9.3c0,5.3,4.1,9.2,9.9,9.2c1.2,0,2.1,0,3.3-0.2l0.3,0c2.2-0.4,4.3-1.3,6-3.1
c0,0.9,0.6,1.9,0.9,2.8L166.7,66.3L166.7,66.3z M152.5,53c-0.2,0.1-0.5,0.1-0.7,0.1c-2.5,0.5-5.1,1.6-5.1,4.6c0,3.1,2.1,3.4,4.7,3.4
c0.4,0,0.7,0,1.1,0c5.2-0.5,5.7-4.4,5.7-6.1l-0.1-3.7C156.9,52.5,154.8,52.7,152.5,53z" transform="rotate(90)"
transform-origin="center"></path>
<path class="st3"
d="M129.2,25.4h7.6v6.8h-7.6V25.4z M57.7,66.4h-7.3c-0.3-0.9-0.8-1.9-0.9-2.8c-1.6,1.8-3.7,2.7-6,3.1l-0.3,0
c-1.2,0.2-2.1,0.2-3.3,0.2c-5.8,0-9.9-4-9.9-9.2c0-6.7,4.3-8.6,9.2-9.3c1.5-0.2,2.9-0.3,4.3-0.3c3.2-0.2,5.8-0.4,5.8-2.7
c0-3.7-3-4-5.8-4c-2.9,0-4.8,1.3-5.1,4.1l-7.3-0.1c0.5-7.1,6.1-9.4,12.3-9.5c5.4,0,13.3,0.8,13.3,8.4v15.5
C56.9,62.4,56.5,64.7,57.7,66.4z M49.3,55.1l-0.1-3.7c-1.2,1.1-3.3,1.3-5.6,1.6c-0.2,0.1-0.5,0.1-0.7,0.1c-2.5,0.5-5.1,1.6-5.1,4.6
c0,3.1,2.1,3.4,4.7,3.4c0.4,0,0.7,0,1.1,0C48.8,60.7,49.3,56.8,49.3,55.1z M166.9,66.3h-7.3c-0.3-0.9-0.8-1.9-0.9-2.8
c-1.6,1.8-3.7,2.7-6,3.1l-0.3,0c-1.2,0.2-2.1,0.2-3.3,0.2c-5.8,0-9.9-4-9.9-9.2c0-6.7,4.3-8.6,9.2-9.3c1.5-0.2,2.9-0.3,4.3-0.3
c3.2-0.2,5.8-0.4,5.8-2.7c0-3.7-3-4-5.8-4c-2.9,0-4.8,1.3-5.1,4.1l-7.3-0.1c0.5-7.1,6.1-9.4,12.3-9.5c5.4,0,13.3,0.8,13.3,8.4v15.5
C166,62.3,165.6,64.6,166.9,66.3z M158.4,55l-0.1-3.7c-1.2,1.1-3.3,1.3-5.6,1.6c-0.2,0.1-0.5,0.1-0.7,0.1c-2.5,0.5-5.1,1.6-5.1,4.6
c0,3.1,2.1,3.4,4.7,3.4c0.4,0,0.7,0,1.1,0C157.9,60.7,158.4,56.7,158.4,55z M88.9,51.2c0,8-4.4,15.4-13.1,15.4c-0.6,0-1.3,0-2-0.1
c-2.7-0.4-5.2-1.9-6.8-4.1v-0.3h-0.2c0.1,0.1,0.2,0.2,0.2,0.3v12.2h-7.6V36.8h6.9v3.1h0.1c1.7-2.7,4.3-4.2,7.4-4.5
c0.5,0,1-0.1,1.5-0.1C84.8,35.2,88.9,42.8,88.9,51.2z M80.7,51c0-4.6-1.8-9.4-6.9-9.6c-5.6,0-6.9,5-6.9,9.6c0,4.6,1.3,9.5,6.9,9.5
C79.1,60.4,80.7,55.8,80.7,51z M129.2,66.4h7.6V36.7h-7.6V66.4z M119.1,66.5h7.6V25.4h-7.6V66.5z M109.1,66.4h7.6V36.7h-7.6V66.4z
M97.5,41.4l0-4.8h-7.1v29.8h7.6V53c0-6.8,3.8-9.5,8.2-9.5v-7.6C102,35.9,99.2,37.7,97.5,41.4z M109.1,32.2h7.6v-6.8h-7.6V32.2z"
transform="rotate(90)" transform-origin="center"></path>
</svg>
<text class="svg" x="323" y="586" font-size="100" id="rightText" fill="black" transform="rotate(-90)" transform-origin="center" textLength="187" lengthAdjust="spacingAndGlyphs">EXEMPLE</text>
<polyline class="strokeColor" id="centerPolygon" points="144,103 642,103 689,153 689,294 192,294 144,246 144,100.5" style="color:#010101;"></polyline>
<polyline class="fillStrokeColor" id="bottomPolygon" points="10,374 525,374 547,347 10,347" style="color:#009afb"></polyline>
<polyline class="fillStrokeColor" id="topPolygon" points="823,22 308,22 286,49 823,49" style="color:#009afb">
</polyline>
<polyline class="fillStrokeColor" id="littleBottomPolygon" points="10,340 553,340 560,332 10,332" style="color:#fefefe"></polyline>
<polyline class="fillStrokeColor" id="littleTopPolygon" points="823,57 280,57 273,65 823,65" style="color:#fefefe"></polyline>
</svg>
<p><button type="button" onclick="fixNestedSvgs()"> Fix nested svg</button></p>
<textarea id="svgMarkup" style="width:100%; min-height:20em"></textarea>
Drawbacks
This conversions might fail in browsers struggling with transform-origin (like some safari/webkit versions).
Some graphic applications might also have issues parsing inherited fill attributes like fill:currentColor.
The above example includes a helper styleToAttribute() to inline some attributes.
Related
JavaScript local storage mixing up toggle keys?
I am a Javascript beginner trying to use local storage to store a set of button toggle states (on/off). My goal is to be able to toggle a set of svg fills, on and off, and have the states stored, returning to the selected state, after a browser refresh.
//LOOP 1 - GET STORED VALUES AND SET SVGs ACCORDINGLY
function grabStoredStates(){
for (let i=0; i < localStorage.length; i++) {
let key = localStorage.key(i);
let value = localStorage.getItem(key);
if (value == "on") {
//"cbox" below is from LOOP 2 - maybe it's causing the problem
cbox[i].style.fill = "coral";
}
}
}
//LOOP 2 - TOGGLE AND STORE TOGGLE STATES
let cbox = document.querySelectorAll(".toggleMe");
for (let i = 0; i < cbox.length; i++) {
cbox[i].addEventListener("click", function() {
if (cbox[i].style.fill == "coral") {
cbox[i].style.fill = "white";
localStorage.setItem(cbox[i].id, "off");
}else{
cbox[i].style.fill = "coral";
localStorage.setItem(cbox[i].id, "on");
}
});
}
<body onload="grabStoredStates()">
<svg height="300" width="700>
<g pointer-events="all">
<rect class="toggleMe" cursor:pointer; id="rect1" width="100" height="100" x="50" y="80" fill="aliceblue" stroke="black" stroke-width="2" />
<rect class="toggleMe" cursor:pointer; id="rect2" width="100" height="100" x="175" y="80" fill="aliceblue" stroke="black" stroke-width="2" />
<rect class="toggleMe" cursor:pointer; id="rect3" width="100" height="100" x="300" y="80" fill="aliceblue" stroke="black" stroke-width="2" />
<rect class="toggleMe" cursor:pointer; id="rect4" width="100" height="100" x="425" y="80" fill="aliceblue" stroke="black" stroke-width="2" />
</g>
</svg>
</body>
My problem is that if you load the page, and then open local storage in Chrome Dev Tools, (Application > Storage > Local Storage), and then click the rectangles in sequence from left to right you should see this, as they toggle correctly from light blue to orange:
Key Value
rect1 on
rect2 on
rect3 on
rect4 on
In local storage, the keys and values are, to that point, matched properly, showing all squares to be orange, as intended. However, if you then click rect3, (the third rectangle from the left), for instance, toggling it to light blue, with an expected corresponding "off" state -- on refreshing the page, the stored values appear to get jumbled, with the loop apparently renumbering the rectangles as if it was starting from [0] -- ignoring the intended key/value pairing. You then see this:
Key Value [PROBLEM]
rect1 on
rect2 on [ --> Displays as Off]
rect3 off [ --> Displays as on]
rect4 on
Is there any way that I can make the keys and values stay together, regardless of loop called. The "grabStoredStates()" loop appears to work, as tested by manually changing values and refreshing... I suspect, then, that it has to do with the transition between two separate for loops? Maybe the "cbox" loop should also be in a function? I looked at the prior stack overflow "can't use booleans in local storage" answer, but as I'm using "on" and "off" that doesn't seem to apply. I also saw a jQuery answer, but I'm not familiar with that library yet. (I wouldn't, however, turn down a jQuery answer if offered.)
Again, my original goal was to be able to toggle svg fills on and off and have the states stored after browser refresh. I'd love a more elegant way if there is one...
Thanks everyone, in advance, for your help.
Here I tried to make a simpler version. The presentation of the <rect>s relies on an attribute called data-state. When the document is loaded the attributes will be updated (I commented out the code for localStorage and replaced it with the array testArr). An event listener on <g> will handle click events and test if a <rect> was clicked, if so, the attribute is updated/toggled. After that the values are all saved to localStorage/testArr.
var cbox;
var testArr = ['on', 'off', 'off', 'on']; // for testing
document.addEventListener('DOMContentLoaded', e => {
cbox = document.querySelectorAll(".toggleMe");
/* // Code for localStorage:
Array.from(Array(localStorage.length).keys()).forEach(i => {
let key = localStorage.key(i);
let value = localStorage.getItem(key);
cbox[i].attributes['data-state'] = value;
});*/
testArr.forEach((state, i) => cbox[i].attributes['data-state'].value = state); // for testing
document.querySelector('g').addEventListener('click', e => {
if(e.target.classList.contains('toggleMe')){
let currentValue = e.target.attributes['data-state'].value;
e.target.attributes['data-state'].value = (currentValue == 'on') ? 'off' : 'on';
/* // Code for localStorage:
[...cbox].forEach((elm, i) => {
let value = elm.attributes['data-state'].value;
localStorage.setItem(`Rect${i}`, value);
});*/
testArr = [...cbox].map(elm => elm.attributes['data-state'].value); // for testing
console.log(testArr.join(',')); // for testing
}
});
});
rect.toggleMe {
cursor: pointer;
width: 50px;
height: 50px;
stroke: black;
stroke-width: 2px;
}
rect[data-state="on"] {
fill: aliceblue;
}
rect[data-state="off"] {
fill: coral;
}
<body>
<svg height="300" width="300">
<g>
<rect class="toggleMe" data-state="off" x="50" y="80" />
<rect class="toggleMe" data-state="off" x="110" y="80" />
<rect class="toggleMe" data-state="off" x="170" y="80" />
<rect class="toggleMe" data-state="off" x="230" y="80" />
</g>
</svg>
</body>
How to make a clickable map from an SVG file?
Currently I am learning Javascript. What I am trying is to make a clickable map of Germany displaying data. Just like this. Amchart provides Germany map . But it does not seem like the one above. I have some data of Germany and want to display it according to regions just like the above. I know first I need to load jquery on html but have no idea how to do with the Germany SVG. Could you tell me how to? Thank you in advance.
You can easily change the USA example you cited (https://www.amcharts.com/demos/us-heat-map/) to Germany like this.
Most important, reference the Germany data:
<script src="https://www.amcharts.com/lib/4/geodata/germanyLow.js"></script>
Then change the map definition line to:
// Set map definition
chart.geodata = window.am4geodata_germanyLow;
And set the German Data with the german state IDs. You can change the data to what you want:
polygonSeries.data = [
{
id: "DE-BB",
value: 4447100
},
{
id: "DE-BE",
value: 626932
},
...
]
Full demo here: https://codepen.io/Alexander9111/pen/YzXRJWK
And below:
//<!-- Chart code -->
//console.log(window.am4core);
//console.log(window.am4geodata_germanyLow);
window.am4core.ready(function () {
// Themes begin
window.am4core.useTheme(am4themes_animated);
// Themes end
// Create map instance
var chart = window.am4core.create("chartdiv", window.am4maps.MapChart);
// Set map definition
chart.geodata = window.am4geodata_germanyLow;
// Set projection
//chart.projection = new window.am4maps.projections.Albers();
// Create map polygon series
var polygonSeries = chart.series.push(new window.am4maps.MapPolygonSeries());
//Set min/max fill color for each area
polygonSeries.heatRules.push({
property: "fill",
target: polygonSeries.mapPolygons.template,
min: chart.colors.getIndex(1).brighten(1),
max: chart.colors.getIndex(1).brighten(-0.3)
});
// Make map load polygon data (state shapes and names) from GeoJSON
polygonSeries.useGeodata = true;
// Set heatmap values for each state
polygonSeries.data = [
{
id: "DE-BB",
value: 4447100
},
{
id: "DE-BE",
value: 626932
},
{
id: "DE-BW",
value: 5130632
},
{
id: "DE-BY",
value: 2673400
},
{
id: "DE-HB",
value: 33871648
},
{
id: "DE-HE",
value: 4301261
},
{
id: "DE-HH",
value: 3405565
},
{
id: "DE-MV",
value: 783600
},
{
id: "DE-NI",
value: 15982378
},
{
id: "DE-NW",
value: 8186453
},
{
id: "DE-RP",
value: 1211537
},
{
id: "DE-SH",
value: 1293953
},
{
id: "DE-SL",
value: 12419293
},
{
id: "DE-SN",
value: 6080485
},
{
id: "DE-ST",
value: 2926324
},
{
id: "DE-TH",
value: 2688418
}
];
// Set up heat legend
let heatLegend = chart.createChild(window.am4maps.HeatLegend);
heatLegend.series = polygonSeries;
heatLegend.align = "right";
heatLegend.valign = "bottom";
heatLegend.width = window.am4core.percent(20);
heatLegend.marginRight = window.am4core.percent(4);
heatLegend.minValue = 0;
heatLegend.maxValue = 40000000;
// Set up custom heat map legend labels using axis ranges
var minRange = heatLegend.valueAxis.axisRanges.create();
minRange.value = heatLegend.minValue;
minRange.label.text = "Little";
var maxRange = heatLegend.valueAxis.axisRanges.create();
maxRange.value = heatLegend.maxValue;
maxRange.label.text = "A lot!";
// Blank out internal heat legend value axis labels
heatLegend.valueAxis.renderer.labels.template.adapter.add("text", function (
labelText
) {
return "";
});
// Configure series tooltip
var polygonTemplate = polygonSeries.mapPolygons.template;
polygonTemplate.tooltipText = "{name}: {value}";
polygonTemplate.nonScalingStroke = true;
polygonTemplate.strokeWidth = 0.5;
// Create hover state and set alternative fill color
var hs = polygonTemplate.states.create("hover");
hs.properties.fill = window.am4core.color("#3c5bdc");
}); // end am4core.ready()
#chartdiv {
width: 100%;
height: 500px
}
<!-- HTML -->
<div id="chartdiv"></div>
<!-- Resources -->
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/maps.js"></script>
<script src="https://www.amcharts.com/lib/4/geodata/germanyLow.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
It is necessary to wrap each path with a group tag<g>and add inside it tags in which the name of the land of Germany will be
<title>"Baden-Wurttemberg" </title>
<path id="DE-BW" class="land" d="M180.99,750.43l0.58,2.09l-3.47,0.13L180.99,750.43zM206.4,570.93l8.66,-0.33l4.12,-7.25l6.54,0.95l0.83,-6.5l-2.07,-1.9l-1.84,2.62l0.97,-2.42l-4.96,-0.95l1.24,-2.93l11.93,-2.03l3.81,4.36l0.36,-3.78l5.23,-0.86l-1.54,8.57l1.8,1.69l3.63,-3.95l1.67,3.87l3.98,-4.23l4.61,11.83l-3.88,5.45l3.04,0.98l3.58,-3.6l0.77,9.54l5.81,-0.09l2.95,-6.01l3.68,3.64l-1.77,6.05l4.31,5.07l-3.48,1.64l3.18,9.66l-2.99,2.1l0.91,5.72l7.87,4.93l-2.46,4.64l2.62,0.9l-0.01,5l6.23,1.2l6.94,10.77l-2.17,1.09l1.94,4.53l-2.36,10.79l4.98,5.72l-5.35,2.5l1.74,-3.05l-1.91,-0.44l-3.02,4.26l-5.88,-4.76l-0.89,3.63l4.3,5.42l-0.75,8.22l-4.84,1.1l-4.09,5.13l-4.1,-1.88l-4.39,1.77l-4.24,7.74l6.02,9.22l4.53,16.17l-3.72,23.3l3.8,5.37l-4.73,2.12l3.47,2.57l0.82,7.82l-3.45,3.6l-3.16,-4.43l-3.99,3.28l-7.15,-2.49l-6.35,6.24l-7.29,0.87l-2.47,5.16l0,0l-32.49,-12.44l-12.39,2.97l-5.46,-8.47l-2.45,1.83l1.4,4.16l-4.17,-1.79l-0.25,-6.73l-1.86,0.82l-2.53,-4.15l-1.61,3.9l-0.73,-3.78l-3.23,-0.87l0.58,2.52l-5.88,1.11l-4.98,9.09l4.45,3.28l8.21,-3.17l1.48,2.35l-3.33,4.98l-3.59,-3.6l-4,2.98l1.93,2.27l-6.63,1.06l-11.33,-5.16l-7.36,5.95l-9.36,1.3l-3.24,-4.09l-4.44,-0.06l-8.25,5.23l-3.72,-2.72l3.29,-0.43l0.41,-3.27l-6.5,1.03l-5.01,-10.15l2.32,-3.43l0.55,-13.76l4.19,-8.82l-3.37,-5.92l0.47,-8.22l7.41,-17.3l3.29,-2.43l-0.78,-6.43l6.8,-23.67l8.46,-11.19l7.49,-4.36l9.11,-15.81l0,0l8.06,-13.06l2.02,-13.01l6.23,-5.87l-2.43,-2.9l3.64,-10.75l-4.12,-1.49l-1.29,-13.08l0,0l3.37,0.03l5.46,6.77l3.5,-2.61l-1.32,-6.75l6.19,-1.33l0.61,8.58l7.72,1.09l0.59,3.21l4.26,-1.08l-1.4,3.51l-3.26,-0.13l-1.54,5.66l3.08,1.47l6.37,-5.89l0.1,-4.73l11.14,-1.27l-3.41,-4.71L206.4,570.93z"/>
</g>
If you need to display more data in the tooltip, make it multi-line
<title> "Mecklenburg-Vorpommern"
------------------------------------
Area • Total -23,174 km2 (8,948 sq mi)
Capital Schwerin
ISO 3166 code DE-MV
</title>
When you hover over a specific part of the map, an increase and output of a hint which is inside the <title>
document.querySelectorAll('path.land').forEach(path => {
path.addEventListener('mouseover', e => {
path.parentNode.parentNode.append(path.parentNode);
const paths = [...document.querySelectorAll('path.land')]
setTimeout(()=> {
paths[paths.length - 1].classList.add('scaled');
},20)
});
});
document.querySelectorAll('path.land').forEach(path => {
path.addEventListener('mouseout', e => {
path.parentNode.parentNode.append(path.parentNode);
const paths = [...document.querySelectorAll('path.land')]
setTimeout(()=> {
paths[paths.length - 1].classList.remove('scaled');
},20)
});
});
.land
{
fill: #CCCCCC;
fill-opacity: 1;
stroke:white;
stroke-opacity: 1;
stroke-width:0.5;
transform-origin: center center;
transform-box: fill-box;
transition: 1s;
}
.land.scaled {
fill:dodgerblue;
stroke:white;
stroke-width:2px;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
<!-- (c) ammap.com | SVG map of Germany -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
width="400" height="400" viewBox="0 0 600 800" style="border:1px solid">
<g>
<title>"Berlin"</title>
<path id="DE-BE" title="Berlin" class="land" d="M485.13,257.7L485.2,257.74L485.2,257.74L488.12,260.2L487.19,265.7L496.58,272.25L493.65,278.32L503.07,281.3L496.02,292.2L495.77,288.21L485.31,286.24L484.46,283.74L481.5,284.77L481.48,288.32L473.68,284.09L462.87,286.78L460.54,284.53L465.46,274.35L462.28,273.56L463.02,266.3L468.62,266.16L468.88,261.95L471.62,262.01L472.85,258.49L477.73,262.39L484.8,259.5L484.07,257.58L484.07,257.58L484.98,257.05L484.98,257.05L485.36,257.16L485.36,257.16z"/>
</g>
<g>
<title>"Brandenburg"</title>
<path id="DE-BB" class="land" d="M344.3,209.85l8.02,1.19l1.8,-3.16l7.08,1.66l1.2,-8.96l7.4,-3.75l4.06,2.84l5.54,-0.75l-1.38,-3.02l4.06,0.48l10.37,-5.54l1.53,-7.65l7.88,3.47l3.88,-2.05l1.78,3.73l8.55,2.52l3.33,5.44l13.8,-0.45l1.43,2.9l4.58,0.3l0.85,3.82l12.47,-1.39l-1.35,2.75l3.96,0.87l9.22,-8.82l5.16,3.63l4.42,-6.82l6.74,3.41l1.96,-5.34l3.03,0.62l2.39,-2.91l1.82,-8.42l4.82,-1.24l5.59,-7.61l6.29,-0.43l-2.43,-3.12l1.17,-4.79l5.37,5.8l2.49,8.85l20.64,-0.67l-0.89,7.39L524.76,195l10.43,0.28l3.57,-5.47l6.01,-2.08l0,0l2.24,7.22l-4.5,6.74l-0.82,12.83l-13.97,12.39l1.04,8.08l-2.41,4.88l14.57,9.2l18.26,18.7l-2.18,4.03l1.88,4.48l-6.32,9.97l3.71,12.6l7.73,3.9l-2.04,12.46l4.91,5.25l-4.07,16.95l-6.63,7.67l10.62,17.16l-1.73,7.98l0,0l-2.12,-1.61l-1.12,4.56l-4.09,0.3l-3.03,-3.09l-11.42,3.93l-3.51,3.93l-12.47,-4.08l-3.16,6.77l-3.47,0.11l1.82,3.13l-4.07,7.31l-2.52,-2.38l-11.84,3.46l-14.67,-0.7l-9.17,-8.53l-1.34,2.87l-3.49,-1.17l-3.59,5.3l-3.34,-1.15l-2.51,-3.24l2.05,-9.8l-4.06,-4.59l1.12,-2.54l-6.89,-5.4l0,0l8.48,-7.22l-2.99,-16.74l-6.2,0.89l0.25,-2.97l-4.62,0.05l-0.97,-3.69h-6.75l-0.47,-3.38l-4.14,0.53l-6.92,-5.08l-3.75,3.09l-4.62,-0.36l-3.86,-4.92l-2.84,1.76l-13.81,-15.78l5.04,-6.12l-3.3,-2.48l3.94,-9.8l-2.16,-7.13l3.66,-6.58l-5.64,-4.62l-3.65,2.66l0.29,-3.85l-2.94,0.24l1.64,-9.97l3.81,-0.42l-1.96,-9.34l3.75,-9.1l-1.54,-5.94l-2.51,-1.75l-4.4,2.67l-0.12,-4.27l-9.2,1.93l-9.36,-3.58l0.63,-4.53l-6.5,-3.88l-3.03,1.23l-1.1,-3.25l-3.23,-0.37l0.88,-2.82l-2.52,0.24l0,0l-9.3,-4.54l-7.29,2.44L344.3,209.85zM484.8,259.5l-7.07,2.89l-4.88,-3.9l-1.23,3.52l-2.74,-0.06l-0.25,4.21l-5.6,0.15l-0.75,7.26l3.18,0.78l-4.92,10.19l2.33,2.25l10.8,-2.69l7.8,4.23l0.02,-3.55l2.96,-1.03l0.85,2.5l10.45,1.97l0.25,3.99l7.05,-10.9l-9.42,-2.97l2.93,-6.08l-9.39,-6.55l0.93,-5.5l-2.92,-2.46l0,0l0.17,-0.58l0,0l-0.38,-0.1l0,0l-0.91,0.52L484.8,259.5z"/>
</g>
<g>
<title>"Bremen"</title>
<path id="DE-HB" class="land" d="M167.33,198.78l0.72,-0.1l0,0l6.18,1.69l-1.23,2.18l2.79,2.05l13.14,0.83l2.17,3.48l5.17,-2.19l2.46,2.73l-2.24,1.09l2.65,2.01l-0.55,5.41l-2.93,3.42l-4.4,-2.78l-2.81,2.1l-3.19,-3.5l-3.43,1.47l-6.32,-13.54l-6.92,-3.24l0,0l0,0l0,0l-1.31,-3.24l0,0L167.33,198.78zM169.27,158.35l8.9,-0.44l-2.71,3.76l0.96,8.47l-3.74,1l-1.17,-3.99l0,0l1.42,-1.84L169.27,158.35z"/>
</g>
<g>
<title>"Hamburg"</title>
<path id="DE-HH" class="land" d="M246.33,163.56L248.94,155.53L253.09,160.38L257.57,153.33L262.18,153.98L263.46,150.25L267.7,150.59L268.7,146.04L274.31,144.08L275.84,145.66L272.71,150.58L277.67,155.3L276.21,160.45L273.15,161.8L273.86,167.23L277,167.42L284.34,175.11L283.21,176.76L283.21,176.76L278.78,180.74L274.68,180.74L266.87,173.56L262.59,178.61L258.16,178.86L257.4,174.35L254.73,177.15L251.25,173.6L249.16,163.92z"/>
</g>
<g>
<title>"Hesse"</title>
<path id="DE-HE" class="land" d="M228.57,363.63L239.71,364.71L243.77,370.74L239.94,370.01L241.01,373.34L238.39,372.36L237.13,376.89L240.77,381.62L240.85,386.94L236.65,388.67L236.04,392.66L233.68,392.15L235.59,394.41L246.59,399.46L249.05,395.24L246.92,396.99L244.56,392.48L250.72,390.28L250.53,387.99L254.96,391.71L254.04,387.33L257.29,387.02L258.96,391.32L258.96,391.32L261.78,400.55L267.08,401.15L267.92,406.43L278.65,410.58L276.22,417.97L274.12,413.9L271.17,415.3L274.68,417.62L272.55,423.36L276.66,425.82L276.6,428.59L266.07,428.06L264.81,431.25L267.6,434.96L260.4,435.21L262.79,436.27L261.76,438.66L264.33,437.27L267.42,441.23L265.3,446.07L260.55,447.42L255.68,465.57L261,466.66L260.6,462.87L267,462.49L268.82,467.35L265.93,468.54L266.23,478L266.23,478L264.73,482.94L257.28,489.23L248.36,487.1L247.38,498.61L241.49,502.46L242.14,506.21L231.68,505.4L232.45,519.97L227.46,520.98L223.4,516.33L213.92,514.58L209.49,520.27L207.43,516.82L199.68,520.26L198.33,524.58L201.66,525.34L202.97,529.97L200.98,531.51L202.13,544.72L205.3,544.47L205.58,549.91L208.4,550.81L206.67,553.11L209.25,554.87L204.1,566.8L206.4,570.93L206.4,570.93L204.44,572.16L207.85,576.87L196.72,578.15L196.62,582.87L190.25,588.76L187.17,587.29L188.71,581.63L191.97,581.76L193.37,578.24L189.11,579.32L188.52,576.11L180.8,575.02L180.19,566.45L174,567.78L175.32,574.53L171.82,577.14L166.36,570.37L162.99,570.34L162.99,570.34L158.96,559.7L166.61,552.81L163.07,552.18L160.28,546.83L156.62,531.69L147.81,525.89L128.79,532.15L121.66,523.67L125.77,521.07L126.65,516.79L131.62,519.2L131.78,515.09L128.71,512.68L130.36,509.21L135.33,505.79L138.18,507.96L138.42,502.49L142.89,503.54L143.7,499.7L139.92,492.22L133.79,488.56L136.77,484.32L135.78,477.16L138.86,473.89L142.66,476.29L144.72,474.55L144.01,461.08L144.01,461.08L146.74,456.2L144.6,450.64L153.07,441.46L158.94,443.44L165.39,437.61L165.28,432.87L170.31,427.46L168.09,421.33L181.98,418.31L180.44,415.53L184.98,408.27L182.08,401.69L174.03,404.39L171.58,401.32L175.59,395.35L180.31,391.22L195.87,389.93L196.45,386.03L192.88,380.49L201,376.79L205.64,379.11L205.92,384.27L213.6,382.79L223.52,369.32L221.31,366.92z"/>
</g>
<g>
<title> "Mecklenburg-Vorpommern"
------------------------------------
Area • Total -23,174 km2 (8,948 sq mi)
Capital Schwerin
ISO 3166 code DE-MV
</title>
<path id="DE-MV" class="land" d="M506.34,97.76l4.16,7.29l9.15,5.19l13.36,13.4l-2.67,1.61l1.77,4.97l-11.17,-0.75l-6.21,3.27l-0.74,-3.29l-1.09,3.36l-5.44,-0.79l7.1,-6.32l-1.86,-8.65l3.52,0.01l-0.37,5.89l1.59,-2.95l3.65,2.11l0.45,-4.57l-4.91,-8.62l-3.86,0.08l1.03,5.1l-0.28,-2.04l-3.95,3.73l-0.23,-5.16l-5.59,3.1l2.7,-9.62l-4.04,-5.48L506.34,97.76zM435.9,69.27l1.61,1.44l-3.42,-0.11L435.9,69.27zM424.89,63.46l2.05,3.08l22.51,0.9l0.62,1.97l-7.87,2.04l-10.53,-1.85l-6.48,6.64l10.89,-5.09l-1.95,4.42l1.53,-3.05l2.24,3.08l3.26,-2.78l1.61,5.67l7.15,-7.56l6.79,-2.47l-0.25,4.24l4.26,3.17l0.76,9.39l4.76,1.33L464,88.41l2.73,-1.42l6.5,3.42l2.33,5.54l2.84,0.23l-3.42,2.36l6.37,-1.55l-2.24,3.23l1.8,-1.25l3.69,7.51l2.08,0.08l-0.64,-4.17l14.05,-4.86l-0.8,2.15l6.6,5.51l-3.72,7.61l10.86,11.49l-5.72,4.9l-0.46,3.65l18.19,11.06l10.48,-0.91l-3.31,4.93l4.15,1.7l8.41,38.14l0,0l-6.01,2.08l-3.57,5.47L524.76,195l8.17,-10.36l0.89,-7.39l-20.64,0.67l-2.49,-8.85l-5.37,-5.8l-1.17,4.79l2.43,3.12l-6.29,0.43l-5.59,7.61l-4.82,1.24l-1.82,8.42l-2.39,2.91l-3.03,-0.62l-1.96,5.34l-6.74,-3.41l-4.42,6.82l-5.16,-3.63l-9.22,8.82l-3.96,-0.87l1.35,-2.75l-12.47,1.39l-0.85,-3.82l-4.58,-0.3l-1.43,-2.9l-13.8,0.45l-3.33,-5.44l-8.55,-2.52l-1.78,-3.73l-3.88,2.05l-7.88,-3.47l-1.53,7.65l-10.37,5.54l-4.06,-0.48l1.38,3.02l-5.54,0.75l-4.06,-2.84l-7.4,3.75l-1.2,8.96l-7.08,-1.66l-1.8,3.16l-8.02,-1.19l0,0l-5.31,-1.53l0.82,-4.63l-6.83,-3.55l-6.5,-12.73l-4.42,-1.59l-5.27,4.67l-8.65,-7.03l-6.65,0.68l0,0l2.42,-9.56l12.25,-6.35l-0.17,-6.55l5.62,0.36l2.65,-8.29l-1.86,-5.47l-4.63,-0.29l-5.85,-5.36l0.85,-13.02l6.93,-5.62l1.96,2.87l3.45,-1.03l-4.59,-1.62l0.66,-3.64l0,0l8.62,-5.35l8.99,-0.97l5.08,3.39l-0.13,5.23l4.98,-2.57l7.9,6.75l1.52,-7.62l-2.42,0.9l-0.06,-4.29L354.8,120l-2.75,-0.41l-0.14,-3.94l6.66,-2.2l-0.02,5.96l1.88,-6.97l3.46,-0.25l3.28,-6.13l-1.35,-1.37l-4.67,5.94l-0.27,-2.75l9.71,-8.54l10.65,0.8l17.71,-4.2l3.87,-5.85l9.57,-6.35L424.89,63.46zM464.13,50.28l-5.16,15.79l2.21,-14.48L464.13,50.28zM482.31,41.36l-3.58,5.45l2.77,6.09l13.64,-0.74l2.81,2.3l-6.61,12.74l2.47,4.76l3.76,0.38l5.99,6.49l-3.54,7.89l-0.54,-3l-3.58,-0.14l3.71,-3.18l-5.99,1.1l4.77,-3.81l-4.41,2.36L492,77.51l-5.2,1.21l-9.55,7.89l0.34,2.53l0.46,-1.89l3.38,1.09l-1.64,3.56l-6.46,-3.18l1.98,0.57l0.78,-3.61l-4.17,2.7l-4.35,-1.79l-0.39,-2.88l-3.42,1.6l2.85,-2l-4.49,-3.49l0.83,-4.21l8.47,-1.45l-3.12,-4.98l-3.91,0.79l1.8,-3.63l-3.64,0.9l3.07,-4.87l3.67,0.83l-1.8,4.08l4.56,-3.56l-2.7,-0.61l0.18,-2.75l-3.88,0.31L464,56.46l6.37,-0.96l3.81,4.46l-0.45,-4.24l3.66,-2.99l-1.02,3.48l2.34,-1.22l2.35,7.22l2.45,2.46l3.33,-1.08l0.54,-9.21l-4.2,1.51l-4.83,-6.9l-8.04,6.07l2.62,-9.48l-7.86,9.54l5.41,-10.88L482.31,41.36z"/>
</g>
<g>
<title>"Lower Saxony"</title>
<path id="DE-NI" class="land" d="M60.4,159.06l-6.04,1.6l1.74,3.04l-5.74,-3.15l6.06,-3.78L60.4,159.06zM97.87,144.43l2.35,1.9l-4.99,-0.89L97.87,144.43zM109.16,141.9l3.35,1.47l-10.55,2.34l0.91,-3.27L109.16,141.9zM118.39,139.44l6,1.1l-9.43,1.86L118.39,139.44zM129.41,138.01l4.77,2.17l-7.91,-1.23L129.41,138.01zM179.97,127.51l5.23,5.99l7.84,1.37l8.04,-1.86l-1.01,-3.55l0,0l13.06,-0.56l6.67,2.83l12.21,17.13l2.84,8.25l11.48,6.46l0,0l2.83,0.35l2.08,9.69l3.48,3.54l2.68,-2.8l0.75,4.5l4.44,-0.25l4.28,-5.05l7.81,7.18h4.1l4.43,-3.98l0,0l18.28,7.39l0,0l6.65,-0.68l8.65,7.03l5.27,-4.67l4.42,1.59l6.5,12.73l6.83,3.55l-0.82,4.63l5.31,1.53l0,0l4.55,7.01l7.29,-2.44l9.3,4.54l0,0l-2.7,3.89l-2.98,-0.7l-0.45,6.88l-12.05,6.6l-19.61,-3.49l-4.16,6.16l-11.02,1.12l1.98,13.53l1.93,-0.26l5.79,11.2l3.61,-1.46l-2.47,5.88l4.52,7.55l-4.03,0.18l-0.71,3.44l8.97,8.94l-5.84,3.47l6.5,11.69l-4.59,3.15l2.97,2.63l-0.96,4.01l-6.47,3.21l1.43,4.79l-16.92,0.71l-8.8,4.69l5.67,4.84l-2.42,1.99l2.34,4.9l-4.6,4.32l-0.2,3.87l8.03,17.4l0,0l-3.96,2.24l1.14,6.25l-3.23,-2.15l-5.53,2.62l-5.49,-3.91l-4.01,0.48l-4.54,9.57l-4.16,2.37l-2,-1.58l-3.07,5.57l-5.45,1.37l-1.4,-1.95l-7.55,6.33l0,0l-1.67,-4.3l-3.25,0.31l0.92,4.38l-4.44,-3.72l0.19,2.28l-6.15,2.2l2.35,4.52l2.14,-1.75l-2.47,4.21l-11,-5.05l-1.91,-2.26l2.36,0.51l0.61,-3.99l4.2,-1.72l-0.08,-5.32l-3.63,-4.73l1.26,-4.53l2.61,0.98l-1.06,-3.33l3.82,0.73l-4.05,-6.03l-11.14,-1.08l0,0l-4.86,-0.35l0.01,-9.56l4.54,-5.24l0.89,-6.85l-8.64,0.73l1.04,-5.53l-4.3,-2.48l0.06,-4.22l-4.21,1.27l-2.11,-2.07l1.21,-9.22l-3.83,-2.61l1.27,-3.61l-9.09,-0.57l-1.66,-6.2l3.7,1.13l-0.5,-4.2l2.61,-0.77l-7.08,-5.01l10.03,-12.94l-1.83,-4.11l2.7,-3.43l-2.38,-2.18l-3,-0.29l-7.38,10.27l-5.19,1.29l-9.48,-0.64l-0.33,-11.32l-3.23,-2.83l-6.02,3.41l-3.47,-1.36l-5.41,7.04l-7.26,-1.47l0.85,5.74l8.13,4.31l-0.09,15.3l4.74,3.12l-7.04,7.64l-7.68,-2.54l-5.97,6.44l-10.21,0.4l-3.27,3.45l-6.11,-4.99l7.84,-3.25l1.17,-4.9l-7.94,-4.33l3.57,-6.49l-1.59,-3.61l3.82,-0.74l-3.51,-5.79l-14.26,-3.71l-1.57,-5.4l-5.14,-2.29l-2.74,4.46l2.44,1.08l-1.28,4.74l-18.29,11.56l-14.88,2.32l0,0l-2.39,-5.02l3.02,-8.69l-5.28,-9.79l-3.12,3.39l-11.76,-2.84l-3.81,-2.53l-1.13,-6.92l5.53,-1.08l-3.48,-6.68l2.53,-2.25l19.34,0.57l2.08,-21.73l8.28,-16.56l-2.42,-13.97l3.04,-4.26l-1.13,-6.84l2.29,-8.14l4.02,-0.19l-18.76,-2.27l1.21,-20.46l4.21,3.68l-3.7,-3.96l4.04,2.69l2.51,-3.23l-3.45,-3.97l9.89,-9.75l7.43,-1.81l10.45,1.73l11.38,-5.21l0.02,2.11l6.55,-1.16l1.8,-2.54l-1.58,2.92l13.81,-0.12l1.09,7.07l4.65,0.61l3.51,10.82l-7.1,3.26l0.18,3.1l8.78,7.68l4.21,-0.14l2.93,-5.51l-0.19,-6.81l-5.28,0.11l3.42,-9.74l3.58,-0.12l8.07,6.35l3.47,-0.63l2.41,3.76l0,0l1.17,3.99l3.74,-1l-0.96,-8.47l2.71,-3.76l-8.9,0.44l0,0l-2.48,-9.53l4.18,-12.99l4.08,-7.1L179.97,127.51zM167.27,198.66L167.27,198.66l1.31,3.24l6.92,3.24l6.32,13.54l3.43,-1.47l3.19,3.5l2.81,-2.1l4.4,2.78l2.93,-3.42l0.55,-5.41l-2.65,-2.01l2.24,-1.09l-2.46,-2.73l-5.17,2.19l-2.17,-3.48l-13.14,-0.83l-2.79,-2.05l1.23,-2.18l-6.18,-1.69L167.27,198.66z"/>
</g>
<g>
<title>"North Rhine-Westphalia"</title>
<path id="DE-NW" class="land" d="M76.38,302.23L91.26,299.91L109.56,288.35L110.84,283.61L108.4,282.53L111.14,278.07L116.27,280.36L117.84,285.76L132.1,289.47L135.61,295.25L131.79,295.99L133.38,299.6L129.81,306.09L137.75,310.42L136.58,315.32L128.74,318.57L134.84,323.57L138.11,320.12L148.32,319.71L154.29,313.27L161.97,315.81L169,308.17L164.26,305.05L164.35,289.75L156.22,285.44L155.37,279.7L162.63,281.17L168.04,274.14L171.52,275.49L177.54,272.09L180.77,274.92L181.1,286.24L190.58,286.88L195.77,285.58L203.15,275.32L206.15,275.61L208.53,277.79L205.83,281.23L207.66,285.33L197.63,298.27L204.71,303.28L202.09,304.04L202.59,308.25L198.89,307.12L200.54,313.31L209.63,313.88L208.36,317.5L212.19,320.1L210.98,329.32L213.09,331.4L217.31,330.13L217.25,334.35L221.55,336.83L220.51,342.36L229.15,341.63L228.26,348.48L223.71,353.72L223.71,363.28L228.57,363.63L228.57,363.63L221.31,366.92L223.52,369.32L213.6,382.79L205.92,384.27L205.64,379.11L201,376.79L192.88,380.49L196.45,386.03L195.87,389.93L180.31,391.22L175.59,395.35L171.58,401.32L174.03,404.39L182.08,401.69L184.98,408.27L180.44,415.53L181.98,418.31L168.09,421.33L170.31,427.46L165.28,432.87L165.39,437.61L158.94,443.44L153.07,441.46L144.6,450.64L146.74,456.2L144.01,461.08L144.01,461.08L138.65,459.88L134.03,452.04L134.05,444.96L125.1,441.26L126.51,436.67L122.85,435.21L119.22,437.66L120.94,445.04L114.44,447.46L115.13,451.42L110.08,455.63L96.22,457.75L93.72,465.7L85.91,467.3L85.17,464.78L81.7,469.61L79.69,468.42L78.04,471.05L75.88,469.03L72.18,473.18L67.87,473.6L67.91,476.25L64.81,476.88L65.96,482.74L63.25,484.33L59.61,480.43L56.06,482.31L59.52,493.57L53.31,496L51.25,492.58L49.29,495.2L46.99,490.88L37.45,495.98L34.92,490.75L34.4,497.38L34.4,497.38L30.39,491.64L32.63,486.02L31,480.75L23.07,480.09L20.03,475.41L25.8,466.98L19.96,466.99L16.38,457.62L11.14,457.68L10.3,452.21L6.95,449.92L10.22,448.04L9.84,444.94L13.35,444.87L14.68,437.33L9.87,436.02L10.22,431.03L2.1,431.94L0.03,424.56L3.1,422.7L6,425.79L9.29,420.15L19.74,413.5L17.53,411.91L19.17,409.75L13.86,412L13.18,404.88L23.01,392.69L22.22,377.36L14.41,367.78L16.02,362.62L10.66,360.78L11.4,356.38L5.75,354.14L8.02,349.6L5.13,345.39L12.71,341.21L19.2,343.66L16.2,337.39L34.27,345.09L33.62,340.22L38.56,342.38L52.24,335.8L55.28,337.7L61.53,328.65L52.4,323.19L52.83,319.98L55.56,319.49L57.1,315L63.11,314.79L71.34,303.9z"/>
</g>
<g>
<title>"Saxony"</title>
<path id="DE-SN" title="Saxony" class="land" d="M409.06,420.36L403.51,415.05L403.77,405.34L400.41,396.85L403.55,395.99L400.5,382.43L404.19,379.5L405.85,372.11L418.09,370.21L419.2,367.43L421.97,368.9L430.88,365.69L429.82,367.29L435.07,361.75L440.17,363.52L444.84,359.68L451.1,364.45L453.48,361.28L458.17,363.61L458.17,363.61L465.06,369.01L463.95,371.54L468.01,376.13L465.95,385.93L468.46,389.17L471.8,390.33L475.4,385.03L478.89,386.2L480.23,383.33L489.4,391.86L504.07,392.57L515.91,389.1L518.43,391.49L522.5,384.18L520.68,381.05L524.16,380.93L527.32,374.16L539.79,378.24L543.3,374.3L554.72,370.38L557.76,373.47L561.84,373.17L562.96,368.61L565.08,370.21L565.08,370.21L565.46,375.9L579.17,381.68L580.87,394.65L584.98,401.69L580.86,421.64L569.28,447.49L558.02,443.73L559.96,436.33L554.58,437.64L556.68,430.81L550.29,427.18L550.48,424.72L549.9,427.06L544.64,427.52L537.82,423.85L535.1,430.7L539.27,430.96L538.35,434L543.85,435.87L543.2,439.71L535.53,440.02L523.44,448.37L512.17,450.25L512.04,455.14L509.38,456.85L488.35,459.06L488.24,465.7L484.54,469.3L478.5,464.63L475.36,471.66L470.54,470.42L467.23,479.28L456.82,478.64L456.11,484.77L451.41,489.31L443.25,483.66L442.67,486.5L441.71,484.71L437.9,486.39L436.06,489.9L433.92,487.95L423.7,489.94L412.12,505.41L412.5,512.26L409.51,511.86L409.75,507.48L406.3,504.99L407.28,502.51L403.83,502.33L402.79,497.38L397.47,497.79L397.47,497.79L389.6,494.54L389.97,490.78L386.17,487.29L386.17,487.29L384.37,484.79L387.82,484.27L388.86,480.96L382.78,475.87L391.14,466.23L394.64,474.55L396.15,472.01L401.44,471.96L400.58,466.68L403.18,468.31L403.78,465.78L407.84,466.63L411.24,463.28L407.72,460.17L407.97,455.85L405.43,455.76L409.46,451.27L407,447.48L413.15,447.22L414.87,444.14L419.12,445.23L421.83,440.04L432.72,437.54L429.76,429.79L423.35,427.71L423.1,423.08L412.5,419.03z"/>
</g>
<g>
<title>"Saxony-Anhalt"
</title>
<path id="DE-ST" title="Saxony-Anhalt" class="land" d="M365.45,218.95L367.97,218.71L367.09,221.53L370.32,221.9L371.42,225.16L374.45,223.93L380.95,227.81L380.32,232.33L389.68,235.92L398.88,233.99L399,238.25L403.4,235.59L405.91,237.34L407.45,243.27L403.7,252.38L405.66,261.72L401.86,262.14L400.21,272.11L403.15,271.87L402.87,275.71L406.51,273.05L412.15,277.67L408.49,284.25L410.65,291.37L406.71,301.18L410.01,303.66L404.97,309.78L418.78,325.56L421.61,323.81L425.47,328.72L430.09,329.08L433.84,326L440.76,331.08L444.91,330.55L445.38,333.93L452.13,333.93L453.1,337.62L457.72,337.57L457.46,340.54L463.67,339.65L466.65,356.39L458.17,363.61L458.17,363.61L453.48,361.28L451.1,364.45L444.84,359.68L440.17,363.52L435.07,361.75L429.82,367.29L430.88,365.69L421.97,368.9L419.2,367.43L418.09,370.21L405.85,372.11L404.19,379.5L400.5,382.43L403.55,395.99L400.41,396.85L403.77,405.34L403.51,415.05L409.06,420.36L409.06,420.36L406.94,425.62L409.56,427.41L404.76,435.61L402.78,431.91L392.16,432.77L384.1,423.91L375.7,425.21L369.96,418.22L358.26,419.09L357.31,409.95L350.71,407.1L357.69,399.43L352.63,390.75L347.7,387.76L326.79,386.99L323.84,374.77L320.02,370.61L320.54,368.2L322.79,369.28L322.26,366.55L308.21,364.11L308.21,364.11L300.18,346.71L300.39,342.85L304.98,338.52L302.64,333.62L305.06,331.63L299.4,326.79L308.2,322.1L325.12,321.39L323.69,316.6L330.16,313.39L331.12,309.38L328.15,306.74L332.74,303.59L326.25,291.89L332.08,288.43L323.11,279.48L323.82,276.04L327.85,275.86L323.33,268.31L325.79,262.43L322.18,263.89L316.39,252.69L314.46,252.95L312.48,239.42L323.5,238.31L327.66,232.14L347.27,235.63L359.32,229.03L359.76,222.15L362.75,222.84z"/>
</g>
<g>
<title>"Schleswig-Holstein"
------------------------------------
Area • Total -15,763.18 km2 (6,086.20 sq mi)
Capital Kiel
ISO 3166 code DE-SH
</title>
<path id="DE-SH" class="land" d="M166.82,66.59l2.35,2.45l-1.94,1.67l-2.67,-4.29L166.82,66.59zM332.49,58.08l9.41,2.94l5.37,11.14l-7.81,-2.19l-4.48,2.14l-2.14,-4.95l-4.11,0.5l1.58,1.6l-2.51,-1.5l1.31,-7.3L332.49,58.08zM167.37,57.79l-0.91,4.28l-1.17,-5.25L167.37,57.79zM180.99,55.13l-0.17,6.25l-5.39,1.13L173.59,58L180.99,55.13zM171.44,52.84l1.27,2.23l-4.19,-2.04L171.44,52.84zM160.46,46.18l0.94,2.71l-2.42,0.45l-4.45,-6.2l4.47,-5.15l-1.37,2.73L160.46,46.18zM169.54,33.33l3.91,1.16l-1.25,7.3l-10.71,-2.42l1.81,-5.03L169.54,33.33zM163.97,0.73l1.77,0.6l-4.43,0.14l2.81,3.28l-5.56,5.21l1.11,7.58l3.58,2.32l11.07,-1.05l2.19,-2.65l19.86,0.96l18.37,5.74l0.89,4.46l2.86,0.97l3.16,0.14l4.19,-4.6l1.73,5.88l11.27,-9.7l-0.47,5.07l12.03,3.77l3.84,4.81l3.35,-1.14l-0.01,-3.72l3.27,1.96l5.13,10.28l-2.49,-0.09l2.35,1.88l-0.49,13.02l-4,5.24L253,64.29l2.07,2.87l16.57,-4.02l4.75,3.21l-4.27,15.75l3.28,-1.77l2.68,-9.43l6.21,-2.37l17.55,7.84l6.6,6.44l5.49,-0.85l8.99,-7.58l6.01,1.51l5.56,-3.27l0.84,2.82l-4.37,2.11l2.28,16.93l-14.19,12.24l-3.89,-2.32l-3.69,6.28l2.12,5.41l5.44,0.71l2.12,3.81l0,0l-0.66,3.64l4.59,1.62l-3.45,1.03l-1.96,-2.87l-6.93,5.62l-0.85,13.02l5.85,5.36l4.63,0.29l1.86,5.47l-2.65,8.29l-5.62,-0.36l0.17,6.55l-12.25,6.35l-2.42,9.56l0,0l-18.28,-7.39l0,0l1.13,-1.65l-7.34,-7.69l-3.15,-0.18l-0.71,-5.44l3.07,-1.35l1.46,-5.15l-4.96,-4.72l3.12,-4.92l-1.53,-1.58l-5.61,1.96l-1,4.55l-4.24,-0.34l-1.27,3.73l-4.62,-0.65l-4.48,7.05l-4.14,-4.86l-2.61,8.04l0,0l-11.48,-6.46l-2.84,-8.25l-12.21,-17.13l-6.67,-2.83l-13.06,0.56l0,0l-6.27,-6.5l-1.5,-7.38l-4.91,-2.29l4.75,-2.33l5.01,1.18l1.7,-2.38l-3.64,-7.99l-4.47,1.29l-3.12,-5.67l1.94,-12.13l-8.27,-0.65l-2.03,2.44L173,82.47l1.71,-5.06l2.16,1.62l3.1,-1.96l-5.35,-1.38l0.8,-2.11l16.15,-2.02l11.39,-7.45l-3.03,-0.39l-1.19,-4.4l-5.54,6.62l-5.8,-1.17l5.53,-13.43l-0.83,-1.84l-4.22,1.34l2.68,-2.28l-10.42,-11.71l-5.97,-17.46L162.4,23.4l-4.71,-3.58l-3.78,14.22l1.04,-17.71l6.25,-15.67L163.97,0.73z"/>
</g>
<g>
<title>"Thuringia"</title>
<path id="DE-TH" class="land" d="M308.21,364.11L322.26,366.55L322.79,369.28L320.54,368.2L320.02,370.61L323.84,374.77L326.79,386.99L347.7,387.76L352.63,390.75L357.69,399.43L350.71,407.1L357.31,409.95L358.26,419.09L369.96,418.22L375.7,425.21L384.1,423.91L392.16,432.77L402.78,431.91L404.76,435.61L409.56,427.41L406.94,425.62L409.06,420.36L409.06,420.36L412.5,419.03L423.1,423.08L423.35,427.71L429.76,429.79L432.72,437.54L421.83,440.04L419.12,445.23L414.87,444.14L413.15,447.22L407,447.48L409.46,451.27L405.43,455.76L407.97,455.85L407.72,460.17L411.24,463.28L407.84,466.63L403.78,465.78L403.18,468.31L400.58,466.68L401.44,471.96L396.15,472.01L394.64,474.55L391.14,466.23L382.78,475.87L388.86,480.96L387.82,484.27L384.37,484.79L386.17,487.29L386.17,487.29L379.89,490.67L376.99,487.67L360.59,492.12L358.09,486.59L355.54,487.62L354.1,485.17L354.77,478.48L349.35,477.53L345.84,482.04L343.09,481.72L345.43,493.56L343.32,502.7L336.61,501L337.36,496.54L334.65,492.94L326.34,494.82L323.22,490.38L316.62,490.37L309.05,495L309.21,497.5L317.46,502.02L317.53,505.09L310.2,504.4L309.26,509.04L302.29,506.5L301.79,496.22L298.27,493.2L294.9,494.07L292.4,489.44L288.76,490.22L284.63,480.24L278.37,478.53L276.56,474.22L272.67,475.36L270.48,473.26L266.23,478L266.23,478L265.93,468.54L268.82,467.35L267,462.49L260.6,462.87L261,466.66L255.68,465.57L260.55,447.42L265.3,446.07L267.42,441.23L264.33,437.27L261.76,438.66L262.79,436.27L260.4,435.21L267.6,434.96L264.81,431.25L266.07,428.06L276.6,428.59L276.66,425.82L272.55,423.36L274.68,417.62L271.17,415.3L274.12,413.9L276.22,417.97L278.65,410.58L267.92,406.43L267.08,401.15L261.78,400.55L258.96,391.32L258.96,391.32L266.51,385L267.91,386.94L273.36,385.58L276.44,380.01L278.43,381.59L282.59,379.22L287.13,369.65L291.14,369.17L296.62,373.08L302.16,370.46L305.39,372.61L304.25,366.35z"/>
</g>
</svg>
The incomplete part of the map is shown here as there is a limit on the number of characters
A more complete copy of the map jsfiddle
Thanks to the author of the script #Observer
I never manipulated an existing svg with jquery. To manipulate an existing svg I might recommend trying to do so with d3.js instead. Maybe this article will help you start out with it. Alternatively you could create a choropleth map with d3.js like in this tutorial.
Snap.load() an svg img and animate the fill color of it's child nodes
I'm using Snap.svg in order to animate an SVG image on hover. In this case, I'm trying to make the image a little bit bigger (1.1x) and then change the fill color. On hover, the image scales correctly, but the fill color is unchanged. I have a suspicion it's because the image consists of three child elements which is where the fill colors reside, but I'm unable to figure out how to access them.
Here's the html:
<svg id="mySvg" width="200" height="200"
viewBox="0 0 2000 2000" preserveAspectRatio="none"></svg>
And here's the javascript:
var s = Snap("#mySvg");
var g = s.group();
var tux = Snap.load("3d_glasses.svg", function (loadedFragment) {
g.append(loadedFragment);
g.hover(hoverover, hoverout);
});
var hoverover = function () {
g.animate({
transform: 'scale(1.1)',
fill: '#FF0000'
}, 1000, mina.bounce);
};
var hoverout = function () {
g.animate({
transform: 'scale(1)',
fill: '#252525'
}, 1000, mina.bounce);
};
My SVG image file (3d_glasses.svg) looks like this:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1024px" height="1024px" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="nonzero" clip-rule="evenodd" viewBox="0 0 10240 10240" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>3D_glasses icon</title>
<path id="curve2" fill="#252525" d="M6669 6080c-89,-175 -174,-356 -261,-531 -39,-78 -85,-152 -137,-222 -131,-175 -191,-356 -191,-575l0 -592 2560 0 0 1920 -1971 0z"/>
<path id="curve1" fill="#252525" d="M3571 6080c89,-175 174,-356 261,-531 39,-78 85,-152 137,-222 131,-175 191,-356 191,-575l0 -592 -2560 0 0 1920 1971 0z"/>
<path id="curve0" fill="#252525" d="M960 3200l8320 0c176,0 320,144 320,320l0 3200c0,176 -144,320 -320,320l-2804 0c-249,0 -462,-132 -573,-354l-354 -707c-83,-167 -243,-266 -429,-266 -186,0 -346,99 -429,266l-354 707c-111,222 -324,354 -573,354l-2804 0c-176,0 -320,-144 -320,-320l0 -3200c0,-176 144,-320 320,-320zm5162 2492c120,240 249,708 547,708l1971 0c176,0 320,-144 320,-320l0 -1920c0,-176 -144,-320 -320,-320l-2560 0c-176,0 -320,144 -320,320l0 592c0,288 83,536 255,767 41,54 76,113 107,173zm-2551 708c123,0 229,-65 285,-175 90,-177 174,-356 262,-533 31,-60 67,-119 107,-173 172,-231 255,-479 255,-767l0 -592c0,-176 -144,-320 -320,-320l-2560 0c-176,0 -320,144 -320,320l0 1920c0,176 144,320 320,320l1971 0z"/>
</svg>
defghi is correct in that the fill value of the elements is causing the issue.
I'm going to give an alternative answer though, and I guess its down to personal preference in terms of one may work better with the rest of your code and solution.
Rather than remove the fill, I would probably use a css transition, that way the original fills are left intact. So it would work something like...
s.select("g").hover( hoverFunc, hoverOut );
function hoverFunc() {
this.selectAll('path').forEach( function( el ){
el.attr({ class: 'redfadein' }) } );
this.animate({ transform: 's1.1,1.1' }, 1000);
};
function hoverOut() {
this.selectAll('path').forEach( function( el ){
el.attr({ class: 'redfadeout' }) } );
this.animate({ transform: 's1,1' }, 1000);
};
and css
redfadein {
transition: fill 1s ease;
fill:red;
}
.redfadeout {
transition: fill 1s ease;
}
jsfiddle
You may also just want to put a white filled background (or small opacity) on the space in the middle of the path so it doesn't hover out when over the white space. You could also move the scale to css as well to keep it all in one place.
You should remove fill attributes from path elements in source SVG file. When path elements have fill attribute, the fill value of g element contains these path is ignored for rendering. <?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" width="1024px" height="1024px" fill-rule="nonzero" viewBox="0 0 10240 10240" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>3D_glasses icon</title> <path id="curve2" d="M6669 6080c-89,..."/> <path id="curve1" d="M3571 6080c89,-175 174..."/> <path id="curve0" d="M960 3200..."/> </svg> If you can't edit SVG file, you can remove fill attributes by calling removeAttribute method of SVGDOM.
Dynamic CSS selection within a group, SVG, Path
I'm learning CSS and working on a problem involving dynamic color selection of a path.
I've a SVG which can have any number of paths (1+) and there are pre-defined colors which should be assigned to paths depending on their order. (A web service returns a collection of paths).
For simplicity, Let's say I've 4 known paths and there are two colors possible: Green and deepPink.
Question: How can I assign following colors dynamically (without creating individual classes for each path):
Path1: Green
Path2: deepPink
Path3: Green
Path4: deepPink
.path_group {
stroke="black";
fill="none";
stroke-width="2";
}
.myPath{
stroke:deepPink;
stroke-width:1.3;
}
/*
Color1: Green
Color2: deepPink
*/
<svg width="100%" height="100%" viewBox="0 0 260 200"
xmlns="http://www.w3.org/2000/svg">
<g class="path_group" >
<path class="myPath" d="M10,25 L110,10" />
<path class="myPath" d="M10,35 L110,20" />
<path class="myPath" d="M10,45 L110,30" />
<path class="myPath" d="M10,55 L110,40" />
</g>
</svg>
I'm more interested in doing it in natively using CSS/JS instead of adding any framework or library to my project. Suggestion regarding any particular concept is appreciated.
Demo: Codepen
Current approach
this.colors = ["green", "deepPink"];
this.getColor = function (pathIndex) {
return this.colors[pathIndex % this.colors.length];
};
You can use CSS3 :nth-child() selector (w3schools) as this:
.myPath { stroke-width:1.3; }
.path_group .myPath:nth-child(4n+1)
{ stroke:red; }
.path_group .myPath:nth-child(4n+2)
{ stroke:blue; }
.path_group .myPath:nth-child(4n+3)
{ stroke:green; }
.path_group .myPath:nth-child(4n+4)
{ stroke:deepPink; }
See updated codepen here.
Clippath not working if created using Javascript but working perfectly if it is from HTML tags
I am facing a issue in SVG clipping.I have one graph which need to be drawn dynamically from the javascript and the values is coming from the JSON. Now in one of the configuration I have to clip the curve if it is going out of range,otherwise I have to change the value range for both x and y axis to fit the curve in the graph window.
I did some POC before implementation of the clipping functionality and I tried in conventional HTML tags and Its working fine. bellow is the code of the POC:
<svg>
<defs>
<clippath id="Clippath1">
<rect id="Rect1" x="0" y="0" width="940.5" height="300">
</rect>
</clippath>
<marker id="Marker1" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="10" markerheight="10" orient="auto">
<circle cx="5" cy="5" r="1" stroke="red" stroke-width="1" fill="black">
</circle>
</marker>
</defs>
<g>
<polyline points="0,0 140,125 160,140 180,220 220,240 300,280 400,450 500,500 900,900"
style="fill: none; stroke: red; stroke-width: 5" clip-path="url(#clip)" stroke="blue"
stroke-width="1" marker-start="url(#point)" marker-mid="url(#point)" marker- end="url(#point)" />
</g>
</svg>
It is working fine. I have one marker to show the point and have one inside the tag and I have applied the clippath to my polyline.
Now in my project I need to perform the same thing from the javascript(creating all the tags) from the javascript. and It is not working.
parentSVGGroup = _currTrendWin.getSVG();
//Create a defs tag
defs = PWC.HmiAC.svgPolyline.CreateSvgElement('defs', { 'id': 'drawableTrendArea_defs', 'appendTo': parentSVGGroup });
//creating the clippath
clipPath = PWC.HmiAC.svgPolyline.CreateSvgElement('clippath', { 'id': 'drawableTrendArea_clippath', 'appendTo': defs });
//creating the rectangle for the defining the drawable rectangle
clipRect = PWC.HmiAC.svgPolyline.CreateSvgElement('rect',
{ 'id': 'drawableTrendAreaRect',
'x': _currTrendWin.getRect().left,
'y': _currTrendWin.getRect().top,
'width': _currTrendWin.getRect().width,
'height': _currTrendWin.getRect().height,
'appendTo': clipPath
});
markerConfig =
{
'id': 'point',
'viewBox': '0 0 10 10',
'refX': 5,
'refY': 5,
'markerWidth': 10,
'markerHeight': 10,
'orient': 'auto',
'appendTo': defs
};
marker = PWC.HmiAC.svgPolyline.CreateSvgElement('marker', markerConfig);
PointStyleConfig =
{
'cx': 5,
'cy': 5,
'r': 1,
'stroke': 'red',
'stroke-width': 1,
'fill': 'black',
'appendTo': marker
};
pointStyle = PWC.HmiAC.svgPolyline.CreateSvgElement('circle', PointStyleConfig);
polyLine = {
'points': points.trim(),
'id': _name,
'fill': 'none',
'stroke': 'blue',
'stroke-width': 1,
'marker-start': 'url(#point)',
'marker-mid': 'url(#point)',
'marker-end': 'url(#point)',
'clip-path': 'url(#drawableTrendArea_clippath)',
'appendTo': parentSVGGroup
};
poly = document.getElementById(_name);
if (poly) {
poly.parentNode.removeChild(poly);
}
poly = PWC.HmiAC.svgPolyline.CreateSvgElement('polyline', polyLine);
This is the code stuff for the creation of the same logic from the javascript.But if I copy the generated html file from the browser and put the whole html tag into a new file it is working as expected.
Sorry I forgot to add that function..its bellow:
_createSvgElement = function (type, attributes) {
var svgElement = document.createElementNS(_svgNS, type),
attr, value;
if (attributes) {
for (attr in attributes) {
if (attr) {
value = attributes[attr];
if (attr === 'appendTo') {
value.appendChild(svgElement);
}
else {
svgElement.setAttributeNS(null, attr, value);
}
}
}
}
return svgElement;
};
could u ppl can help me out from the problem..
Thanks
Arijit
it is very late to the game. I am having the same issue, the problem seems to come from the fact that javascript/jquery both convert the elementname to all lower case and clippath actually needs to be clipPath. I am currently trying to find a work around for this or if you did would you please share. The PITA way I was able to get it to work was creating an HTML string and then using jquery to append the clipPaths to my defs section. Not clean, not the way I would like to do it, but it got it done.