We Keep Coding

how to make svg curve at one end

im using svg for circular progress bar , i want to make one end curve not the both end . how is this possible ?
how can i implement one end curve in svg?
svg {
height: 80vh;
margin: 10vh auto;
border: 1px solid red;
display: block;
transform: rotate(-90deg);
}
svg circle {
stroke-width: 10;
fill: transparent;
}
#outer {
stroke: lightgrey;
}
#inner {
stroke: blue;
animation: value 2.5s linear forwards;
stroke-linecap: round;
}
#keyframes value {
0% {
stroke-dasharray: 0 100;
}
100% {
stroke-dasharray: 90 100;
}
}
<svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle id="outer" cx="50" cy="50" r="40" />
<circle id="inner" pathLength="100" cx="50" cy="50" r="40" />
</svg>

The easiest way would be to mask the starting point of the blue circle.
For this you will need a <mask> like so:
<mask id="m">
<rect width="100" height="100" fill="white"/>
<rect x="85" y="40" width="10" height="10" />
</mask>
Please observe that the first rectangle is white and it covers the whole chart. (Everything under a white pixel will be visible). The smaller rectangle is black and covers the starting point of the blue circle. Everything under a black pixel will be invisible.
svg {
height: 80vh;
margin: 10vh auto;
border: 1px solid red;
display: block;
transform: rotate(-90deg);
}
svg circle {
stroke-width: 10;
fill: transparent;
}
#outer {
stroke: lightgrey;
}
#inner {
stroke: blue;
animation: value 2.5s linear forwards;
stroke-linecap: round;
}
#keyframes value {
0% {
stroke-dasharray: 0 100;
}
100% {
stroke-dasharray: 90 100;
}
}
<svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<mask id="m">
<rect width="100" height="100" fill="white"/>
<rect x="85" y="40" width="10" height="10" />
</mask>
<circle id="outer" cx="50" cy="50" r="40" />
<circle id="inner" pathLength="100" cx="50" cy="50" r="40" mask="url(#m)" />
</svg>

Try this code:
svg {
height: 80vh;
margin: 10vh auto;
border: 1px solid red;
display: block;
transform: rotate(-90deg);
border-top-right-radius: 20px;
}
svg circle {
stroke-width: 10;
fill: transparent;
}
#outer {
stroke: lightgrey;
}
#inner {
stroke: blue;
animation: value 2.5s linear forwards;
stroke-linecap: round;
}
#keyframes value {
0% {
stroke-dasharray: 0 100;
}
100% {
stroke-dasharray: 90 100;
}
}
<svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle id="outer" cx="50" cy="50" r="40" />
<circle id="inner" pathLength="100" cx="50" cy="50" r="40" />
</svg>

I came up with an alternative solution than enxaneta suggested. The problem with using a mask is that when your value goes over 96% or so, the circle isn't completely filled and the mask is revealed.
Instead, you can set a rounded progress line on top of another progress line that has flat endcaps. By rotating the rounded progress line by roughly 5 degrees, the flat end is revealed.
Here's how to do that in React Native with react-native-svg:
const radius = 60;
let myPercentage = 40;
const circleCircumference = 2 * Math.PI * radius;
const valueOffset = circleCircumference -
(circleCircumference * myPercentage * 0.98) / 100;
<Svg height={radius * 2 + 30} width={radius * 2 + 30}>
<G rotation={-90} originX={radius + 15} originY={radius + 15}>
// Background gray circle
<Circle
cx="50%"
cy="50%"
r={radius}
stroke="rgb(60, 60, 60)"
fill="transparent"
strokeWidth="10"
strokeDasharray={circleCircumference}
strokeLinecap="butt"
/>
// Background progress circle with flat ends
<Circle
cx="50%"
cy="50%"
r={radius}
stroke={"rgb(0, 51, 204)"}
fill="transparent"
strokeWidth="10"
strokeDasharray={circleCircumference}
strokeDashoffset={valueOffset}
strokeLinecap="butt"
/>
// Progress circle with round ends rotated by 5 degrees
<Circle
cx="50%"
cy="50%"
r={radius}
stroke={rgb(0, 51, 204)}
fill="transparent"
rotation={5}
originX={radius + 15}
originY={radius + 15}
strokeWidth="10"
strokeDasharray={circleCircumference}
strokeDashoffset={valueOffset}
strokeLinecap="round"
/>
</G>
</Svg>

Can't get hamburger menu to animate on click

I targeted the SVG rect using :nth-chid(1), 2 and 3 and made a -> that I'm trying to trigger on click. Don't know what I'm doing wrong here. Any Help would be great thank you!
(function() {
var burger;
buger = document.getElementById('burger');
burger.addEventListener('click', function() {
console.log('you cliked the burger');
return burger.classList.toggle('st0-active');
});
}).call(this);
body {
max-width: 900px;
margin: 0 auto;
}
.st0-active:nth-child(1) {
-webkit-transform: rotate(27deg) translate(23px, -51px);
transform: rotate(27deg) translate(23px, -51px);
fill: #000;
}
.st0-active:nth-child(2) {
fill: #000;
}
.st0-active:nth-child(3) {
-webkit-transform: rotate(-21deg) translate(-48px, 15px);
transform: rotate(-21deg) translate(-48px, 15px);
fill: #000;
}
<body>
<svg class="mo-icon__svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" id="burger">
<g id="icon_x5F_hamburger">
<rect x="0.11206" y="46.3329" class="st0" width="200" height="8"/>
<rect x="0.11206" y="96.22083" class="st0" width="200" height="8"/>
<rect x="0.11206" y="146.10876" class="st0" width="200" height="8"/>
</g>
</svg>
</body>
Here is a picture of my designed end goal
Which is the reason I'm using CSS Transforms and targeting the rect using nth-child Here is a link to the codepen that I'm currently working on
enter link description here

(function() {
var burger;
burger = document.getElementById('burger');
burger.addEventListener('click', function() {
console.log('you cliked the burger');
return burger.classList.toggle('st0-active');
});
}).call(this);
body {
max-width: 900px;
margin: 0 auto;
}
#burger > g > rect{
transition: transform 1s;
}
.st0-active > g > rect:nth-child(1) {
-webkit-transform: rotate(27deg) translate(23px, -51px);
transform: rotate(27deg) translate(23px, -51px);
fill: #000;
}
.st0-active > g > rect:nth-child(2) {
fill: #000;
}
.st0-active > g > rect:nth-child(3) {
-webkit-transform: rotate(-21deg) translate(-48px, 15px);
transform: rotate(-21deg) translate(-48px, 15px);
fill: #000;
}
<body>
<svg class="mo-icon__svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" id="burger">
<g id="icon_x5F_hamburger">
<rect x="0.11206" y="46.3329" class="st0" width="200" height="8"/>
<rect x="0.11206" y="96.22083" class="st0" width="200" height="8"/>
<rect x="0.11206" y="146.10876" class="st0" width="200" height="8"/>
</g>
</svg>
</body>
Try to add this code.
#burger{
transition: transform 1s;
}
Additionally
CSS3 transitions allows you to change property values smoothly (from one value to another), over a given duration.

Save SVG as PNG using javascript Unknown DOM exception

I am trying to convert an SVG to PNG through browser using javascript
I've been following the answer on this question Save inline SVG as JPEG/PNG/SVG
It works for the given XML in that answer
Unfortunately, I got Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. when trying to convert my SVG. Here's the snippet to my code. Can anybody tell me why it's not working?
var btn = document.querySelector('button');
var svg = document.querySelector('svg');
var canvas = document.querySelector('canvas');
function triggerDownload (imgURI) {
var evt = new MouseEvent('click', {
view: window,
bubbles: false,
cancelable: true
});
var a = document.createElement('a');
a.setAttribute('download', 'MY_COOL_IMAGE.png');
a.setAttribute('href', imgURI);
a.setAttribute('target', '_blank');
a.dispatchEvent(evt);
}
btn.addEventListener('click', function () {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var data = (new XMLSerializer()).serializeToString(svg);
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
img.crossOrigin = 'anonymous'
var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svgBlob);
img.onload = function () {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
var imgURI = canvas
.toDataURL('image/png')
.replace('image/png', 'image/octet-stream');
triggerDownload(imgURI);
};
img.src = url;
});
<button>svg to png</button>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="161px" height="91px" version="1.1" style="background-color: rgb(255, 255, 255);"><defs/><g transform="translate(0.5,0.5)"><rect x="0" y="0" width="160" height="90" fill="#ffffff" stroke="#000000" pointer-events="none"/><path d="M 0 26 L 0 0 L 160 0 L 160 26 Z" fill="#dae8fc" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(48.5,7.5)"><switch><foreignObject style="overflow:visible;" pointer-events="all" width="63" height="12" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; vertical-align: top; white-space: nowrap; font-weight: bold; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;">Classname</div></div></foreignObject><text x="32" y="12" fill="#000000" text-anchor="middle" font-size="12px" font-family="Helvetica" font-weight="bold">Classname</text></switch></g><g transform="translate(5.5,32.5)"><switch><foreignObject style="overflow:visible;" pointer-events="all" width="62" height="12" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; vertical-align: top; overflow: hidden; max-height: 22px; max-width: 148px; width: 63px; white-space: normal; word-wrap: normal;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;">+ field: type</div></div></foreignObject><text x="31" y="12" fill="#000000" text-anchor="middle" font-size="12px" font-family="Helvetica">+ field: type</text></switch></g><path d="M 0 56 L 160 56" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(5.5,66.5)"><switch><foreignObject style="overflow:visible;" pointer-events="all" width="111" height="12" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; vertical-align: top; overflow: hidden; max-height: 22px; max-width: 148px; width: 112px; white-space: normal; word-wrap: normal;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;">+ method(type): type</div></div></foreignObject><text x="56" y="12" fill="#000000" text-anchor="middle" font-size="12px" font-family="Helvetica">+ method(type): type</text></switch></g></g></svg>
<canvas id="canvas"></canvas>

You have issues in your SVG's foreignObject on removing this will solve your issue,
var btn = document.querySelector('button');
var svg = document.querySelector('svg');
var canvas = document.querySelector('canvas');
function triggerDownload (imgURI) {
var evt = new MouseEvent('click', {
view: window,
bubbles: false,
cancelable: true
});
var a = document.createElement('a');
a.setAttribute('download', 'MY_COOL_IMAGE.png');
a.setAttribute('href', imgURI);
a.setAttribute('target', '_blank');
a.dispatchEvent(evt);
}
btn.addEventListener('click', function () {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var data = (new XMLSerializer()).serializeToString(svg);
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
img.crossOrigin = 'anonymous'
var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svgBlob);
img.onload = function () {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
var imgURI = canvas
.toDataURL('image/png')
.replace('image/png', 'image/octet-stream');
triggerDownload(imgURI);
};
img.src = url;
});
<button>svg to png</button>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="161px" height="91px" version="1.1" style="background-color: rgb(255, 255, 255);">
<defs/>
<g transform="translate(0.5,0.5)">
<rect x="0" y="0" width="160" height="90" fill="#ffffff" stroke="#000000" pointer-events="none"/>
<path d="M 0 26 L 0 0 L 160 0 L 160 26 Z" fill="#dae8fc" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
<g transform="translate(48.5,7.5)">
<switch>
<text x="32" y="12" fill="#000000" text-anchor="middle" font-size="12px" font-family="Helvetica" font-weight="bold">Classname</text>
</switch>
</g>
<g transform="translate(5.5,32.5)">
<switch>
<text x="31" y="12" fill="#000000" text-anchor="middle" font-size="12px" font-family="Helvetica">+ field: type</text>
</switch>
</g>
<path d="M 0 56 L 160 56" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(5.5,66.5)">
<switch>
<text x="56" y="12" fill="#000000" text-anchor="middle" font-size="12px" font-family="Helvetica">+ method(type): type</text>
</switch>
</g>
</g>
</svg>
<canvas id="canvas"></canvas>
You can also try Canvas2Image plugin

svg to canvas image in jspdf - I Get a black content

I've used jspdf to convert the svg image to canvas and then to pdf
The plugins I've used are
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/jspdf.js"></script>
<script type="text/javascript" src="assets/js/html2canvas.js"></script>
<script type="text/javascript" src="assets/js/html2canvas.svg.js"></script>
<script type="text/javascript" src="assets/js/canvg.js"></script>
My HTML code for the svg is
genpdf
<svg class="bullet" width="416" height="50">
<g transform="translate(75,5)">
<rect class="range s0" width="301" height="25" x="0"/>
<rect class="range s1" width="250.83333333333334" height="25" x="0"/>
<rect class="range s2" width="200.66666666666666" height="25" x="0"/>
<rect class="measure s0" width="230.76666666666668" height="8.333333333333334" x="0" y="8.333333333333334"/>
<rect class="measure s1" width="210.7" height="8.333333333333334" x="0" y="8.333333333333334"/>
<g class="tick" transform="translate(0,0)" style="opacity: 1;">
<line y1="25" y2="29.166666666666668"/>
<text text-anchor="middle" dy="1em" y="29.166666666666668">0</text>
</g>
<g class="tick" transform="translate(50.16666793823242,0)" style="opacity: 1;">
<line y1="25" y2="29.166666666666668"/>
<text text-anchor="middle" dy="1em" y="29.166666666666668">5</text>
</g>
<g class="tick" transform="translate(100.33333587646484,0)" style="opacity: 1;">
<line y1="25" y2="29.166666666666668"/>
<text text-anchor="middle" dy="1em" y="29.166666666666668">10</text>
</g>
<g class="tick" transform="translate(150.5,0)" style="opacity: 1;">
<line y1="25" y2="29.166666666666668"/>
<text text-anchor="middle" dy="1em" y="29.166666666666668">15</text>
</g>
<g class="tick" transform="translate(200.6666717529297,0)" style="opacity: 1;">
<line y1="25" y2="29.166666666666668"/>
<text text-anchor="middle" dy="1em" y="29.166666666666668">20</text>
</g>
<g class="tick" transform="translate(250.8333282470703,0)" style="opacity: 1;">
<line y1="25" y2="29.166666666666668"/>
<text text-anchor="middle" dy="1em" y="29.166666666666668">25</text>
</g>
<g class="tick" transform="translate(301,0)" style="opacity: 1;">
<line y1="25" y2="29.166666666666668"/>
<text text-anchor="middle" dy="1em" y="29.166666666666668">30</text>
</g>
<g x="200" y="100" style="text-anchor: end;" transform="translate(-6,12.5)">
<text class="title">NOVORA</text>
</g>
</g>
</svg>
I'm unable to get the exact image that is required as an output when I generate it to pdf.
I'm converting the svg to canvas but still I'm unable to get the desired output. Instead of the exact image I get a black content inside that.
The css code for the above one is
.bullet {
font: 10 px sans-serif;
}
.bullet.marker {
stroke: #000;
stroke-width: 2px;
}
.bullet .tick line {
stroke: # 666;
stroke-width: .5px;
}
.bullet.range.s0 {
fill: #eee;
}
.bullet.range.s1 {
fill: #ddd;
}
.bullet.range.s2 {
fill: #ccc;
}
.bullet.measure.s0 {
fill: steelblue;
}
.bullet.measure.s1 {
fill: #fff;
}
.bullet.measure.s2 {
fill: steelblue;
}
.bullet.measure.s3 {
fill: lightsteelblue;
}
.bullet.title {
font-size: 10px;
font-weight: bold;
}
.bullet.subtitle {
fill: #999;
}
The javascript that helps me rendering the data is
function genPdf(){
var svgElements = $("#page-content-wrapper").find('svg');
//replace all svgs with a temp canvas
svgElements.each(function() {
var canvas, xml;
canvas = document.createElement("canvas");
canvas.className = "screenShotTempCanvas";
// canvas.getContext("3d");
//convert SVG into a XML string
xml = (new XMLSerializer()).serializeToString(this);
// Removing the name space as IE throws an error
xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, '');
//draw the SVG onto a canvas
canvg(canvas, xml);
$(canvas).insertAfter(this);
$(this).addClass('tempHide');
$(this).hide();
});
html2canvas(document.getElementById('page-content-wrapper'), {
onrendered: function (canvas){
var img = canvas.toDataURL("image/jpeg",1.0);
var doc = new jsPDF();
doc.addImage(img, 'JPEG' , 10, 10);
doc.save('test.pdf');
}
});
setTimeout(function(){
$("#page-content-wrapper").find('.screenShotTempCanvas').remove();
$("#page-content-wrapper").find('.tempHide').show().removeClass('tempHide');
$("#page-content-wrapper").find('.bullet').show();
},2000);
}
function getStyle(el, styleProp) {
var camelize = function(str) {
return str.replace(/\-(\w)/g, function(str, letter) {
return letter.toUpperCase();
});
};
if (el.currentStyle) {
return el.currentStyle[camelize(styleProp)];
} else if (document.defaultView && document.defaultView.getComputedStyle) {
return document.defaultView.getComputedStyle(el, null)
.getPropertyValue(styleProp);
} else {
return el.style[camelize(styleProp)];
}
}
Please help me out in this. Thanks

Selecting path element fill with JQuery

I have some outer g element and an inner element with a green fill colour that is part of a maps SVG path. I've managed to select the inner path element, but am unable to select its fill attribute to get its colour. How can I select the first inner path element's fill colour?
Selecting the first path element:
var item = $('.datamap path')
And my attempt to get the fill, which yields the following exception:
$(item).attr('fill')
Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '[object SVGPathElement]' is not a valid selector.
Here's what my DOM looks like:
<g id="" class="datamaps-subunits">
<path d="M335.2035703570357,117.04432210343535L336.6065106510651,117.58613066703171L337.6587158715872,117.39767551447646L337.95934593459344,116.76163937460245L339.06165616561657,116.54962732797782L339.8132313231323,116.12560323472849L340.11386138613864,115.01842921346635L341.2662766276628,114.75930337870288L341.51680168016804,114.26460860324534L342.1681668166817,114.61796201428643L342.5690069006901,114.66507580242525L343.37068706870684,114.68863269649465L344.37278727872786,114.97131542532753L344.82373237323736,115.13621368381338L345.8258325832584,114.68863269649465L346.27677767776777,114.97131542532753L346.7277227722773,114.33527928545355L347.5795079507951,114.35883617952294L347.7799279927993,114.1468241328983L347.93024302430246,113.58145867523254L348.531503150315,113.11032079384438L349.2830783078308,113.41656041674668L349.13276327632764,113.840584509996L349.5837083708371,113.91125519220422L349.433393339334,115.0890998956746L349.9845484548455,115.53668088299332L350.485598559856,115.25399815416041L351.0868586858686,115.11265678974398L351.93864386438645,114.47662064987L352.8906390639064,114.59440512021703L354.34368436843687,114.59440512021703L354.5942094209421,114.99487231939695L353.7925292529253,115.13621368381338L353.09105910591063,115.39533951857686L351.487698769877,115.56023777706272L349.9845484548455,115.86647739996499L349.1828682868287,116.45539975170018L349.483498349835,117.04432210343535L349.6839183918392,117.75102892551756L348.98244824482447,118.33995127725274L349.0325532553255,118.8582029467797L348.63171317131713,119.37645461630663L347.32898289828984,119.32934082816783L347.8801380138014,120.24805969687469L346.9782478247825,120.60141310791579L346.3769876987699,121.42590440034505L346.477197719772,122.27395258684369L345.92604260426043,122.6508628919542L345.4249924992499,122.53307842160717L344.32268226822686,122.72153357416242L344.1723672367237,123.09844387927293L343.1702670267027,123.09844387927293L342.3685868586859,123.89937827763278L342.31848184818483,125.07722298110312L340.51470147014703,125.64258843876888L339.5627062706271,125.52480396842185L339.2620762076208,125.83104359132413L338.46039603960395,125.66614533283828L337.05745574557454,125.85460048539355L334.70252025202524,125.14789366331132L335.9551455145515,123.89937827763278L335.85493549354936,123.0042163029953L334.8027302730273,122.76864736230124L334.70252025202524,121.87348538766378L334.2515751575158,120.76631136640165L334.85283528352835,120.01249075618061L334.2515751575158,119.80047870955596L334.6023102310231,118.78753226457147Z" class="datamaps-subunit AFG" style="fill: rgb(171, 221, 164); stroke-width: 1px; stroke: rgb(253, 253, 253);">
</path>
<path d="M283.29477947794777,181.87289458244325L283.44509450945094,182.29691867569258L283.24467446744677,182.98006860370538L283.495199519952,183.63966163764877L283.29477947794777,184.1579133071757L283.44509450945094,184.62905118856384L280.53900390039,184.60549429449446L280.43879387938796,189.03419037954296L281.3907890789079,190.18847818894392L282.2926792679268,191.06008326951195L279.7373237323732,191.6254487271777L276.3802880288029,191.41343668055305L275.42829282928295,190.75384364660965L269.76642664266427,190.82451432881788L269.5660066006601,190.91874190509552L268.71422142214226,190.28270576522152L267.81233123312336,190.2355919770827L267.0106510651065,190.47116091777679L266.3091809180918,190.75384364660965L266.2089708970897,189.8586816719722L266.40939093909395,188.65728007443244L266.8603360336034,187.36165090061505L266.96054605460546,186.7727285488799L267.4114911491149,185.52421316320132L267.7121212121212,184.95884770553556L268.51380138013803,184.04012883682867L268.9647464746475,183.4276495910241L269.11506150615065,182.39114625197018L269.0649564956496,181.59021185361036L268.6140114011401,181.09551707815282L268.26327632763275,180.24746889165417L267.9125412541254,179.4229775992249L268.0127512751275,179.14029487039204L268.4135913591359,178.57492941272628L268.0127512751275,177.2321864507701L267.7121212121212,176.3134675820632L267.0106510651065,175.41830560742574L267.1609660966097,175.15917977266227L267.7121212121212,174.970724620107L268.1129612961296,174.9942815141764L268.6140114011401,174.82938325569057L272.72262226222625,174.85294014975997L273.0733573357336,175.88944348881387L273.474197419742,176.71393478124313L273.77482748274826,177.16151576856186L274.3259825982598,177.89177948471348L275.2278727872787,177.77399501436645L275.6788178817882,177.58553986181118L276.48049804980496,177.77399501436645L276.6809180918092,177.44419849739475L277.0316531653165,176.6197072049655L277.88343834383437,176.57259341682666L277.98364836483654,176.3370244761326L278.6851185118512,176.3134675820632L278.53480348034805,176.83171925159016L280.23837383738373,176.80816235752076L280.2884788478848,177.67976743808882L280.53900390039,178.22157600168518L280.33858385838585,179.0696241881838L280.43879387938796,179.91767237468247L280.8897389738974,180.4359240442094L280.83963396339635,182.08490662906792L281.1903690369037,181.96712215872088L281.7916291629163,181.99067905279028L282.64341434143415,181.80222390023502ZM266.96054605460546,174.73515567941294L266.55970597059707,173.67509544628965L267.1609660966097,173.08617309455445L267.5618061806181,172.8506041538604L268.0628562856286,173.32174203524852L267.5618061806181,173.60442476408141L267.36138613861385,173.9813350691919L267.31128112811285,174.5702574209271Z" class="datamaps-subunit AGO" style="fill: rgb(171, 221, 164); stroke-width: 1px; stroke: rgb(253, 253, 253);">
</path>
<path d="M278.63501350135016,108.42249887403241L278.484698469847,108.89363675542054L278.6851185118512,109.48255910715571L279.2362736273627,109.83591251819684L279.2362736273627,110.18926592923793L278.78532853285327,110.4012779758626L278.6851185118512,110.84885896318133L278.03375337533754,111.53200889119412L277.7832283228323,111.41422442084709L277.7832283228323,111.1079847979448L277.031653`1653165,110.66040381062606L276.8813381338134,109.97725388261327L276.98154815481547,109.03497811983698L277.1819681968197,108.61095402658768L276.98154815481547,108.37538508589361L276.8813381338134,107.95136099264428L277.482598259826,107.26821106463146L277.53270327032703,107.52733689939494L277.9335433543354,107.3859955349785L278.23417341734176,107.76290584008902L278.5849084908491,107.90424720450545Z" class="datamaps-subunit ALB" style="fill: rgb(171, 221, 164); stroke-width: 1px; stroke: rgb(253, 253, 253);">
</path>
<path d="M321.7754275427543,132.92166870621563L322.0259525952595,132.85099802400742L322.0760576057606,133.2279083291179L323.1783678367837,133.01589628249326L324.33078307830783,133.06301007063206L325.18256825682573,133.0865669647015L326.13456345634563,132.1678480959946L327.13666366636664,131.27268612135714L328.03855385538554,130.40108104078908L328.2890789078908,130.8722189221772L328.489498949895,131.97939294343934L327.78802880288026,131.97939294343934L327.63771377137715,132.89811181214623L327.88823882388243,133.0865669647015L327.2869786978698,133.36924969353436L327.2869786978698,133.93461515120012L326.88613861386136,134.49998060886588L326.8360336033603,135.06534606653165L326.5354035403541,135.34802879536454L322.37668766876686,134.66487886735175L321.82553255325536,133.25146522318732Z" class="datamaps-subunit ARE" style="fill: rgb(171, 221, 164); stroke-width: 1px; stroke: rgb(253, 253, 253);">
</path>
<path d="M156.82973297329733,243.07370537476248L155.97794779477948,243.02659158662365L154.47479747974796,243.02659158662365L154.47479747974796,239.91708156946194L155.02595259525953,240.55311770933594L155.72742274227426,241.61317794245923L157.53120312031203,242.43766923488846L159.485298529853,242.7910226459296L158.83393339333935,243.4977294680118L157.53120312031203,243.5448432561506ZM162.74212421242123,197.6324567148765L165.29747974797482,199.89391854553955L166.44989498949894,200.1059305921642L168.15346534653466,201.1424339312181L169.6065106510651,201.6842424948145L169.80693069306932,202.29672174061906L168.4039903990399,204.41684220686568L169.80693069306932,204.7937525119762L171.4102910291029,205.00576455860084L172.51260126012602,204.77019561790678L173.76522652265226,203.71013538478348L173.96564656465648,202.4851768931743L174.66711671167116,202.22605105841083L175.3685868586859,203.0269854567707L175.31848184818483,204.1341594780328L174.16606660666068,204.91153698232324L173.2140714071407,205.476902439989L171.66081608160817,206.8196454019452L169.80693069306932,208.72775382156715L169.45619561956198,209.83492784282927L169.1054605460546,211.2718983810631L169.1054605460546,212.63819823708872L168.8048304830483,212.9679947540604L168.7046204620462,213.86315672869787L168.6044104410441,214.59342044484947L170.35808580858088,215.77126514831983L170.15766576657666,216.73709780516552L171.05955595559556,217.34957705097008L170.95934593459344,218.0327269789829L169.65661566156615,219.79949403418843L167.55220522052207,220.55331464440945L164.7964296429643,220.83599737324232L163.24317431743174,220.6946560088259L163.54380438043805,221.54270419532452L163.24317431743174,222.57920753437844L163.49369936993702,223.28591435646064L162.6920192019202,223.75705223784877L161.23897389738974,223.94550739040403L159.93624362436245,223.4508126149465L159.38508850885088,223.8041660259876L159.58550855085508,225.1940227760826L160.48739873987398,225.61804686933192L161.2890789078908,225.1704658820132L161.6899189918992,225.90072959816482L160.3871887188719,226.32475369141414L159.2848784878488,227.1963587719822L159.08445844584458,228.5862155220772L158.73372337233724,229.34003613229822L157.43099309930994,229.34003613229822L156.32868286828685,230.07029984844985L155.92784278427843,231.10680318750374L157.33078307830783,232.11974963248826L158.63351335133515,232.40243236132113L158.18256825682568,233.6509477469997L156.52910291029104,234.42832525129012L155.62721272127214,236.0773078361486L154.37458745874588,236.61911639974497L153.7733273327333,237.27870943368836L154.22427242724274,238.71567997192219L155.1762676267627,239.516614370282L154.57500750075008,239.44594368807378L153.27227722772278,239.23393164144915L149.9152415241524,239.04547648889388L149.36408640864084,238.24454209053403L149.36408640864084,237.18448185741073L148.46219621962194,237.27870943368836L147.96114611461147,236.78401465823083L147.81083108310833,235.29993033185818L148.9131413141314,234.6874510860536L149.36408640864084,233.81584600548553L149.16366636663668,233.10913918340333L149.9152415241524,231.90773758586357L150.4162916291629,230.07029984844985L150.26597659765974,229.2458085560206L150.86723672367236,228.98668272125713L150.7169216921692,228.46843105173016L150.06555655565558,228.18574832289727L150.56660666066608,227.5968259711621L149.9152415241524,227.07857430163517L149.61461146114613,225.4767055049155L150.16576657665766,225.1940227760826L149.9152415241524,223.4979264030853L150.26597659765974,222.06095586485148L150.6167116711671,220.83599737324232L151.46849684968498,220.31774570371536L151.01755175517553,218.95144584768977L151.01755175517553,217.6793735679418L152.06975697569757,216.78421159330432L152.01965196519654,215.60636688983396L152.82133213321333,214.2636239278778L152.82133213321333,212.9679947540604L152.47059705970597,212.70886891929692L151.81923192319232,210.30606572421743L152.67101710171016,208.892652080053L152.57080708070808,207.5263522240274L153.07185718571856,206.27783683834883L153.97374737473746,204.95865077046204L154.97584758475847,204.11060258396338L154.52490249024902,203.54523712629762L154.82553255325536,203.0976561389789L154.7754275427543,200.789080520177L156.27857785778576,200.1059305921642L156.77962796279627,198.645403159861L156.62931293129313,198.3156066428893L157.78172817281728,197.0435343631413L159.58550855085508,197.39688777418243L160.3871887188719,198.38627732509752L160.93834383438343,197.27910330383537L162.54170417041703,197.3262170919742Z" class="datamaps-subunit ARG" style="fill: rgb(171, 221, 164); stroke-width: 1px; stroke: rgb(253, 253, 253);">
</path>
<path d="M310.65211521152116,109.48255910715571L312.60621062106213,109.27054706053107L312.85673567356736,109.62390047157217L313.4078907890789,109.85946941226624L313.1072607260726,110.21282282330733L313.85883588358837,110.70751759876488L313.45799579958,111.13154169201421L314.0592559255926,111.50845199712472L314.7106210621062,111.74402093781879L314.7106210621062,112.70985359466448L314.2095709570957,112.75696738280328L313.6584158415842,111.95603298444345L313.6584158415842,111.72046404374937L313.0571557155715,111.74402093781879L312.60621062106213,111.36711063270828L312.35568556855685,111.39066752677766L311.80453045304534,110.99020032759776L310.7523252325233,110.63684691655666L310.9026402640264,109.97725388261327Z" class="datamaps-subunit ARM" style="fill: rgb(171, 221, 164); stroke-width: 1px; stroke: rgb(253, 253, 253);">
</path>
</g>

if you want to get css property value you should use css not attr
var item = $('.datamaps-subunits path');
$(item).css('fill');
see it work here