Develop Reference

How to make a clickable map from an SVG file? - javascript

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.

Related

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.

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.

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.

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.

I'm developing a map, in Javascript using SVG to draw the lines.
I would like to add a feature where you can search for a road, and if the road is found, a circle appears on the map.
I know i can draw a circle in SVG, but my problem is that, the size of the circle should not change depending on the zoom-level. In other words the circle must have the same size at all times.
The roads on my map have this feature, all i had to do was add
vector-effect="non-scaling-stroke"
to the line attributes..
A line looks like this.
<line vector-effect="non-scaling-stroke" stroke-width="3" id = 'line1' x1 = '0' y1 = '0' x2 = '0' y2 = '0' style = 'stroke:rgb(255,215,0);'/>
The circle looks like this.
<circle id = "pointCircle" cx="0" cy="0" r="10" stroke="red" stroke-width="1" fill = "red"/>
Is it possible to define the circle as "non-scaling" somehow?

It took me a while, but I finally got the math clean. This solution requires three things:
Include this script in your page (along with the SVGPan.js script), e.g.
<script xlink:href="SVGPanUnscale.js"></script>
Identify the items you want not to scale (e.g. place them in a group with a special class or ID, or put a particular class on each element) and then tell the script how to find those items, e.g.
unscaleEach("g.non-scaling > *, circle.non-scaling");
Use transform="translate(…,…)" to place each element on the diagram, not cx="…" cy="…".
With just those steps, zooming and panning using SVGPan will not affect the scale (or rotation, or skew) of marked elements.
Demo: http://phrogz.net/svg/scale-independent-elements.svg
Library
// Copyright 2012 © Gavin Kistner, !#phrogz.net
// License: http://phrogz.net/JS/_ReuseLicense.txt
// Undo the scaling to selected elements inside an SVGPan viewport
function unscaleEach(selector){
if (!selector) selector = "g.non-scaling > *";
window.addEventListener('mousewheel', unzoom, false);
window.addEventListener('DOMMouseScroll', unzoom, false);
function unzoom(evt){
// getRoot is a global function exposed by SVGPan
var r = getRoot(evt.target.ownerDocument);
[].forEach.call(r.querySelectorAll(selector), unscale);
}
}
// Counteract all transforms applied above an element.
// Apply a translation to the element to have it remain at a local position
function unscale(el){
var svg = el.ownerSVGElement;
var xf = el.scaleIndependentXForm;
if (!xf){
// Keep a single transform matrix in the stack for fighting transformations
// Be sure to apply this transform after existing transforms (translate)
xf = el.scaleIndependentXForm = svg.createSVGTransform();
el.transform.baseVal.appendItem(xf);
}
var m = svg.getTransformToElement(el.parentNode);
m.e = m.f = 0; // Ignore (preserve) any translations done up to this point
xf.setMatrix(m);
}
Demo Code
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Scale-Independent Elements</title>
<style>
polyline { fill:none; stroke:#000; vector-effect:non-scaling-stroke; }
circle, polygon { fill:#ff9; stroke:#f00; opacity:0.5 }
</style>
<g id="viewport" transform="translate(500,300)">
<polyline points="-100,-50 50,75 100,50" />
<g class="non-scaling">
<circle transform="translate(-100,-50)" r="10" />
<polygon transform="translate(100,50)" points="0,-10 10,0 0,10 -10,0" />
</g>
<circle class="non-scaling" transform="translate(50,75)" r="10" />
</g>
<script xlink:href="SVGPan.js"></script>
<script xlink:href="SVGPanUnscale.js"></script>
<script>
unscaleEach("g.non-scaling > *, circle.non-scaling");
</script>
</svg>

If you are looking for a fully static way of doing this, you might be able to combine non-scaling-stroke with markers to get this, since the markers can be relative to the stroke-width.
In other words, you could wrap the circles in a <marker> element and then use those markers where you need them.
<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000">
<marker id="Triangle"
viewBox="0 0 10 10" refX="0" refY="5"
markerUnits="strokeWidth"
markerWidth="4" markerHeight="3"
orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
<path d="M 100 100 l 200 0" vector-effect="non-scaling-stroke"
fill="none" stroke="black" stroke-width="10"
marker-end="url(#Triangle)" />
<path d="M 100 200 l 200 0"
fill="none" stroke="black" stroke-width="10"
marker-end="url(#Triangle)" />
</svg>
The same can also be viewed and tweaked here. The svg spec isn't fully explicit about what should happen in this case (since markers are not in SVG Tiny 1.2, and vector-effect isn't in SVG 1.1). My current line of thinking was that it should probably affect the size of the marker, but it seems no viewers do that at the moment (try in a viewer that supports vector-effect, e.g Opera or Chrome).

Looks like some work was done in webkit (maybe related to this bug: 320635) and the new transform doesn't stick around when simply appended like that
transform.baseVal.appendItem
This seems to work better. Even works in IE 10.
EDIT: Fixed the code for more general case of multiple translate transformations in the front and possible other transformations after. First matrix transformation after all translates must be reserved for unscale though.
translate(1718.07 839.711) translate(0 0) matrix(0.287175 0 0 0.287175 0 0) rotate(45 100 100)
function unscale()
{
var xf = this.ownerSVGElement.createSVGTransform();
var m = this.ownerSVGElement.getTransformToElement(this.parentNode);
m.e = m.f = 0; // Ignore (preserve) any translations done up to this point
xf.setMatrix(m);
// Keep a single transform matrix in the stack for fighting transformations
// Be sure to apply this transform after existing transforms (translate)
var SVG_TRANSFORM_MATRIX = 1;
var SVG_TRANSFORM_TRANSLATE = 2;
var baseVal = this.transform.baseVal;
if(baseVal.numberOfItems == 0)
baseVal.appendItem(xf);
else
{
for(var i = 0; i < baseVal.numberOfItems; ++i)
{
if(baseVal.getItem(i).type == SVG_TRANSFORM_TRANSLATE && i == baseVal.numberOfItems - 1)
{
baseVal.appendItem(xf);
}
if(baseVal.getItem(i).type != SVG_TRANSFORM_TRANSLATE)
{
if(baseVal.getItem(i).type == SVG_TRANSFORM_MATRIX)
baseVal.replaceItem(xf, i);
else
baseVal.insertItemBefore(xf, i);
break;
}
}
}
}
EDIT2:
Chrome killed getTransformToElement for some reason, so the matrix needs to be retrieved manually:
var m = this.parentNode.getScreenCTM().inverse().multiply(this.ownerSVGElement.getScreenCTM());

It's discussed here and here
It looks like current browsers don't do the expected thing, so one needs to apply the inverse transform of the zoom (scale) on the contents of the <marker>, eg. transorm: scaleX(5) on the user of the <marker> etc. will need to be accompanied by a transform: translate(...) scaleX(0.2) inside the <pattern>, also factoring in possible x/y/width/height/transform-origin values inside the pattern if needed