I am working with a svg element which has a line chart and the label at the end of the each line.
A minimum sample is below
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
<rect class="vBoxRect" width="1280" height="720" fill="black" stroke="bound" style="overflow: visible;"></rect>
<rect class="boundRect" x="70" y="70" width="1120" height="600" fill="black"></rect>
<g class="bound" style="transform: translate(70px, 70px);">
<g class="lines">
<path class="Cuba" fill="none" stroke="white" opacity="1" d="M0,385.8783581344254L46.666666666666664,340.04110795732606L93.33333333333333,340.04110795732606L140,340.04110795732606L186.66666666666666,340.04110795732606L233.33333333333334,340.04110795732606L280,261.5473775717186L326.6666666666667,261.5473775717186L373.3333333333333,261.5473775717186L420,261.5473775717186L466.6666666666667,261.5473775717186L513.3333333333333,193.79191415980043L560,193.79191415980043L606.6666666666666,193.79191415980043L653.3333333333334,174.38265408552468L700,174.38265408552468L746.6666666666666,140.17685505574866L793.3333333333334,140.17685505574866L840,140.17685505574866L886.6666666666666,140.17685505574866L933.3333333333334,140.17685505574866L980,99.07632474477359L1026.6666666666665,99.07632474477359L1073.3333333333335,99.07632474477359L1120,97.28970086328088"></path>
<path class="Nicaragua" fill="none" stroke="white" opacity="1
" d="M0,498.798228969007L46.666666666666664,498.798228969007L93.33333333333333,508.9184060721062L140,508.9184060721062M233.33333333333334,405.6265984654729L280,405.6265984654729L326.6666666666667,405.6265984654729L373.3333333333333,405.6265984654729L420,456.7774936061383L466.6666666666667,426.0869565217393L513.3333333333333,426.0869565217393L560,405.6265984654729L606.6666666666666,405.6265984654729L653.3333333333334,221.48337595907955L700,221.48337595907955L746.6666666666666,221.48337595907955L793.3333333333334,201.02301790281317L840,211.25319693094582L886.6666666666666,170.33248081841413L933.3333333333334,170.33248081841413L980,170.33248081841413L1026.6666666666665,180.56265984654772L1073.3333333333335,155.26826115061547L1120,124.24046541693643"></path>
<path class="Chad" fill="none" stroke="white" opacity="1" d="M0,577.4117647058824L46.666666666666664,577.4117647058824L93.33333333333333,577.4117647058824L140,577.4117647058824L186.66666666666666,577.4117647058824M280,545.3510436432637L326.6666666666667,539.2789373814043L373.3333333333333,539.2789373814043L420,539.2789373814043L466.6666666666667,551.4231499051233L513.3333333333333,551.4231499051233L560,551.4231499051233L606.6666666666666,551.4231499051233L653.3333333333334,479.8498122653327L700,459.8247809762202L746.6666666666666,459.8247809762202L793.3333333333334,459.8247809762202L840,459.8247809762202L886.6666666666666,459.8247809762202L933.3333333333334,479.8498122653327L980,456.43070787637083L1026.6666666666665,459.94397759103623L1073.3333333333335,454.75671750181556L1120,296.39468690702114"></path>
<path class="Rwanda" fill="none" stroke="white" opacity="1" d="M0,438.6554621848753L46.666666666666664,438.6554621848753L93.33333333333333,438.6554621848753L140,357.98319327731105L186.66666666666666,358.34658187599433L233.33333333333334,358.34658187599433L280,141.17647058823525L326.6666666666667,141.17647058823525L373.3333333333333,141.17647058823525L420,141.17647058823525L466.6666666666667,141.17647058823525L513.3333333333333,70.5882352941176L560,70.5882352941176L606.6666666666666,70.5882352941176L653.3333333333334,70.5882352941176L700,70.5882352941176L746.6666666666666,0L793.3333333333334,0L840,0L886.6666666666666,0L933.3333333333334,23.5294117647058L980,23.5294117647058L1026.6666666666665,23.5294117647058L1073.3333333333335,23.5294117647058L1120,23.5294117647058"></path>
</g>
<g class="Label" style="opacity: 1;">
<text class="labelRwanda" text-anchor="left" fill="white" alignment-baseline="middle" x="1120" y="23.5294117647058" style="overflow: visible;">Rwanda:61.25%</text>
<text class="labelCuba" text-anchor="left" fill="white" alignment-baseline="middle" x="1120" y="97.28970086328088" style="overflow: visible;">Cuba:53.41%</text>
<text class="labelNicaragua" text-anchor="left" fill="white" alignment-baseline="middle" x="1120" y="124.24046541693643" style="overflow: visible;">Nicaragua:50.55%</text>
<text class="labelChad" text-anchor="left" fill="white" alignment-baseline="middle" x="1120" y="296.39468690702114" style="overflow: visible;">Chad:32.26%</text>
</g>
</g>
</svg>
The entire text element for label at the end of line chart is not visible for all of them. For example, for class="labelRwanda" and class="labelNicaragua" the entire text elements respectively, Rwanda:61.25% and Nicaragua:50.55% are not visible. But for other two, class="labelCuba" and class="labelChad" then entire text elements respectively Cuba:53.41% and Chad:32.26% are visible.
Is there any way for me to know beforehand, by using javascript to know which text elements will be entirely visible and which will be partially visible.
I tried with getBBox() of each of the text elements but they were not of help to me. I initially thought that if x+width is greater than viewbox width than that would be the candidate for partially visible` elements. But it did not work.
document.querySelector('.labelRwanda').getBBox().x+document.querySelector('.labelRwanda').getBBox().width;
document.querySelector('.labelCuba').getBBox().x+document.querySelector('.labelCuba').getBBox().width;
document.querySelector('.labelNicaragua').getBBox().x+document.querySelector('.labelNicaragua').getBBox().width;
document.querySelector('.labelChad').getBBox().x+document.querySelector('.labelChad').getBBox().width;
Update
Based on #Michael Mullany's suggestion, I tried the following where I used getBoundingClientRect() instead of getBBox() so that I don't need to account for any transform coming from the parent element. But I still could not get it to do the job accurately
const parent = document.querySelector('svg').getBoundingClientRect().right;
const ele = document.querySelectorAll('.Label>text');
ele.forEach(
(a,i)=>{
const child = a.getBoundingClientRect().right;
const diff = parent-child;
(diff<0)?a.setAttribute('x',`${parseFloat(a.getAttribute('x'))+diff}`):null
}
);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
<rect class="vBoxRect" width="1280" height="720" fill="black" stroke="bound" style="overflow: visible;"></rect>
<rect class="boundRect" x="70" y="70" width="1120" height="600" fill="black"></rect>
<g class="bound" style="transform: translate(70px, 70px);">
<g class="lines">
<path class="Cuba" fill="none" stroke="white" opacity="1" d="M0,385.8783581344254L46.666666666666664,340.04110795732606L93.33333333333333,340.04110795732606L140,340.04110795732606L186.66666666666666,340.04110795732606L233.33333333333334,340.04110795732606L280,261.5473775717186L326.6666666666667,261.5473775717186L373.3333333333333,261.5473775717186L420,261.5473775717186L466.6666666666667,261.5473775717186L513.3333333333333,193.79191415980043L560,193.79191415980043L606.6666666666666,193.79191415980043L653.3333333333334,174.38265408552468L700,174.38265408552468L746.6666666666666,140.17685505574866L793.3333333333334,140.17685505574866L840,140.17685505574866L886.6666666666666,140.17685505574866L933.3333333333334,140.17685505574866L980,99.07632474477359L1026.6666666666665,99.07632474477359L1073.3333333333335,99.07632474477359L1120,97.28970086328088"></path>
<path class="Nicaragua" fill="none" stroke="white" opacity="1
" d="M0,498.798228969007L46.666666666666664,498.798228969007L93.33333333333333,508.9184060721062L140,508.9184060721062M233.33333333333334,405.6265984654729L280,405.6265984654729L326.6666666666667,405.6265984654729L373.3333333333333,405.6265984654729L420,456.7774936061383L466.6666666666667,426.0869565217393L513.3333333333333,426.0869565217393L560,405.6265984654729L606.6666666666666,405.6265984654729L653.3333333333334,221.48337595907955L700,221.48337595907955L746.6666666666666,221.48337595907955L793.3333333333334,201.02301790281317L840,211.25319693094582L886.6666666666666,170.33248081841413L933.3333333333334,170.33248081841413L980,170.33248081841413L1026.6666666666665,180.56265984654772L1073.3333333333335,155.26826115061547L1120,124.24046541693643"></path>
<path class="Chad" fill="none" stroke="white" opacity="1" d="M0,577.4117647058824L46.666666666666664,577.4117647058824L93.33333333333333,577.4117647058824L140,577.4117647058824L186.66666666666666,577.4117647058824M280,545.3510436432637L326.6666666666667,539.2789373814043L373.3333333333333,539.2789373814043L420,539.2789373814043L466.6666666666667,551.4231499051233L513.3333333333333,551.4231499051233L560,551.4231499051233L606.6666666666666,551.4231499051233L653.3333333333334,479.8498122653327L700,459.8247809762202L746.6666666666666,459.8247809762202L793.3333333333334,459.8247809762202L840,459.8247809762202L886.6666666666666,459.8247809762202L933.3333333333334,479.8498122653327L980,456.43070787637083L1026.6666666666665,459.94397759103623L1073.3333333333335,454.75671750181556L1120,296.39468690702114"></path>
<path class="Rwanda" fill="none" stroke="white" opacity="1" d="M0,438.6554621848753L46.666666666666664,438.6554621848753L93.33333333333333,438.6554621848753L140,357.98319327731105L186.66666666666666,358.34658187599433L233.33333333333334,358.34658187599433L280,141.17647058823525L326.6666666666667,141.17647058823525L373.3333333333333,141.17647058823525L420,141.17647058823525L466.6666666666667,141.17647058823525L513.3333333333333,70.5882352941176L560,70.5882352941176L606.6666666666666,70.5882352941176L653.3333333333334,70.5882352941176L700,70.5882352941176L746.6666666666666,0L793.3333333333334,0L840,0L886.6666666666666,0L933.3333333333334,23.5294117647058L980,23.5294117647058L1026.6666666666665,23.5294117647058L1073.3333333333335,23.5294117647058L1120,23.5294117647058"></path>
</g>
<g class="Label" style="opacity: 1;">
<text class="labelRwanda" id="labelRwanda" text-anchor="left" fill="white" alignment-baseline="middle" x="1120" y="23.5294117647058" style="overflow: visible;">Rwanda:61.25%</text>
<text class="labelCuba" id="labelCuba" text-anchor="left" fill="white" alignment-baseline="middle" x="1120" y="97.28970086328088" style="overflow: visible;">Cuba:53.41%</text>
<text class="labelNicaragua" id="labelNicaragua" text-anchor="left" fill="white" alignment-baseline="middle" x="1120" y="124.24046541693643" style="overflow: visible;">Nicaragua:50.55%</text>
<text class="labelChad" id="labelChad" text-anchor="left" fill="white" alignment-baseline="middle" x="1120" y="296.39468690702114" style="overflow: visible;">Chad:32.26%</text>
</g>
</g>
</svg>
</body>
</html>
If you set the text-anchor attribute to "end" all the texts will align to the right. Would that be OK?
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
<rect class="vBoxRect" width="1280" height="720" fill="black" stroke="bound"/>
<rect class="boundRect" x="70" y="70" width="1120" height="600" fill="black"/>
<g class="bound" transform="translate(70 70)">
<g class="lines">
<path class="Cuba" fill="none" stroke="white" opacity="1" d="M0,385.8783581344254L46.666666666666664,340.04110795732606L93.33333333333333,340.04110795732606L140,340.04110795732606L186.66666666666666,340.04110795732606L233.33333333333334,340.04110795732606L280,261.5473775717186L326.6666666666667,261.5473775717186L373.3333333333333,261.5473775717186L420,261.5473775717186L466.6666666666667,261.5473775717186L513.3333333333333,193.79191415980043L560,193.79191415980043L606.6666666666666,193.79191415980043L653.3333333333334,174.38265408552468L700,174.38265408552468L746.6666666666666,140.17685505574866L793.3333333333334,140.17685505574866L840,140.17685505574866L886.6666666666666,140.17685505574866L933.3333333333334,140.17685505574866L980,99.07632474477359L1026.6666666666665,99.07632474477359L1073.3333333333335,99.07632474477359L1120,97.28970086328088"></path>
<path class="Nicaragua" fill="none" stroke="white" opacity="1" d="M0,498.798228969007L46.666666666666664,498.798228969007L93.33333333333333,508.9184060721062L140,508.9184060721062M233.33333333333334,405.6265984654729L280,405.6265984654729L326.6666666666667,405.6265984654729L373.3333333333333,405.6265984654729L420,456.7774936061383L466.6666666666667,426.0869565217393L513.3333333333333,426.0869565217393L560,405.6265984654729L606.6666666666666,405.6265984654729L653.3333333333334,221.48337595907955L700,221.48337595907955L746.6666666666666,221.48337595907955L793.3333333333334,201.02301790281317L840,211.25319693094582L886.6666666666666,170.33248081841413L933.3333333333334,170.33248081841413L980,170.33248081841413L1026.6666666666665,180.56265984654772L1073.3333333333335,155.26826115061547L1120,124.24046541693643"></path>
<path class="Chad" fill="none" stroke="white" opacity="1" d="M0,577.4117647058824L46.666666666666664,577.4117647058824L93.33333333333333,577.4117647058824L140,577.4117647058824L186.66666666666666,577.4117647058824M280,545.3510436432637L326.6666666666667,539.2789373814043L373.3333333333333,539.2789373814043L420,539.2789373814043L466.6666666666667,551.4231499051233L513.3333333333333,551.4231499051233L560,551.4231499051233L606.6666666666666,551.4231499051233L653.3333333333334,479.8498122653327L700,459.8247809762202L746.6666666666666,459.8247809762202L793.3333333333334,459.8247809762202L840,459.8247809762202L886.6666666666666,459.8247809762202L933.3333333333334,479.8498122653327L980,456.43070787637083L1026.6666666666665,459.94397759103623L1073.3333333333335,454.75671750181556L1120,296.39468690702114"></path>
<path class="Rwanda" fill="none" stroke="white" opacity="1" d="M0,438.6554621848753L46.666666666666664,438.6554621848753L93.33333333333333,438.6554621848753L140,357.98319327731105L186.66666666666666,358.34658187599433L233.33333333333334,358.34658187599433L280,141.17647058823525L326.6666666666667,141.17647058823525L373.3333333333333,141.17647058823525L420,141.17647058823525L466.6666666666667,141.17647058823525L513.3333333333333,70.5882352941176L560,70.5882352941176L606.6666666666666,70.5882352941176L653.3333333333334,70.5882352941176L700,70.5882352941176L746.6666666666666,0L793.3333333333334,0L840,0L886.6666666666666,0L933.3333333333334,23.5294117647058L980,23.5294117647058L1026.6666666666665,23.5294117647058L1073.3333333333335,23.5294117647058L1120,23.5294117647058"></path>
</g>
<g class="Label" style="opacity: 1;">
<text class="labelRwanda" text-anchor="end" fill="white" alignment-baseline="middle" x="1120" y="23.5294117647058" style="overflow: visible;">Rwanda:61.25%</text>
<text class="labelCuba" text-anchor="end" fill="white" alignment-baseline="middle" x="1120" y="97.28970086328088" style="overflow: visible;">Cuba:53.41%</text>
<text class="labelNicaragua" text-anchor="end" fill="white" alignment-baseline="middle" x="1120" y="124.24046541693643" style="overflow: visible;">Nicaragua:50.55%</text>
<text class="labelChad" text-anchor="end" fill="white" alignment-baseline="middle" x="1120" y="296.39468690702114" style="overflow: visible;">Chad:32.26%</text>
</g>
</g>
</svg>
A modern (standard) Web Component <svg-linegraph> can help.
To make data entry as easy as possible, we'll do them in HTML
<svg-linegraph>
<path d="mx y....">Cuba</path>
<path stroke="red" stroke-width="3" d="mx y....">Nicaragua</path>
</svg-linegraph>
But this means the <path> Elements are now technically an UnknownHTMLElement, and not an SVG path.
This is easily fixed by reading all of these <path> and adding the outerHTML to an existing <svg> (that will add the paths in the correct SVG NameSpace)
While parsing all <path> we can set the user defined attributes or defaults.
We are still lazy... Those <path> can be in any sized viewPort.
So in one more step we parse the, now valid SVG!!, paths again, get the boundaries of each path, and thus automagically calculate the correct viewPort
Positioning the country label is easy, we get the last point in each <path> and position a <text> on the correct X,Y location. (and gave the viewPort an extra 100 units to draw the labels right of the chart)
All code required to create a <svg-linegraph> Web Component is:
Note: I simplified your original d-path values with: https://yqnn.github.io/svg-path-editor
You can, ofcourse, use any valid d-path
<script>
customElements.define("svg-linegraph", class extends HTMLElement {
connectedCallback() {
setTimeout(() => { // ensure <svg-linegraph> innerHTML is parsed
this.innerHTML = `<svg style="background:grey">${
[...this.querySelectorAll("path")].map(path => {
const cloneAttribute= (x,v)=> path.setAttribute(x, path.getAttribute(x)||v);
cloneAttribute("fill", "none"); // prefer user defined settings
cloneAttribute("stroke", "black");
cloneAttribute("stroke-width", "2");
return path.outerHTML;
}).join("")}<g>COUNTRYLABELS GO HERE</g></svg>`;
let xaxis=[], yaxis=[]; // find viewPort boundaries
this.querySelector("g").innerHTML = [...this.querySelectorAll("path")].map(path => {
let {x:labelX,y:labelY} = path.getPointAtLength(path.getTotalLength()); // last path point
let {x,y,width,height} = path.getBBox();
xaxis.push(x,x+width); yaxis.push(y,y+height);
return `<text fill="red" stroke="black" font-family="Arial" font-size="20px" alignment-baseline="middle"
x="${labelX+5}" y="${labelY}">${path.innerHTML}</text>`;
}).join("");
xaxis.sort((a,b)=>a-b); yaxis.sort((a,b)=>a-b); // sort by number!
let viewbox = `${xaxis.at(0)} ${yaxis.at(0)-10} ${xaxis.at(-1)+100} ${yaxis.at(-1)}`;
this.querySelector("svg").setAttribute("viewBox",viewbox);
})
}
})
</script>
<svg-linegraph>
<path d="m0 386 47-46 46 0 47 0 47 0 46 0 47-78 47 0 46 0 47 0 47 0 46-68 47 0 47 0 46-20 47 0 47-34 46 0 47 0 47 0 46 0 47-41 47 0 46 0 47-2">Cuba</path>
<path stroke="red" stroke-width="3" d="m0 499 47 0 46 10 47 0m93-103 47 0 47 0 46 0 47 51 47-31 46 0 47-20 47 0 46-185 47 0 47 0 46-20 47 10 47-41 46 0 47 0 47 11 46-26 47-31">Nicaragua</path>
<path stroke="red" stroke-width="4" d="m0 577 47 0 46 0 47 0 47 0m93-32 47-6 46 0 47 0 47 12 46 0 47 0 47 0 46-71 47-20 47 0 46 0 47 0 47 0 46 20 47-24 47 4 46-5 47-159">Chad</path>
<path d="m0 439 47 0 46 0 47-81 47 0 46 0 47-217 47 0 46 0 47 0 47 0 46-70 47 0 47 0 46 0 47 0 47-71 46 0 47 0 47 0 46 24 47 0 47 0 46 0 47 0">Rwanda</path>
</svg-linegraph>
I am new to svg
Actually we are doing for property interaction. With the help of the svg.
I have slots like this
SVG Path
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="281.333px" height="117.333px" viewBox="0 0 281.333 117.333" enable-background="new 0 0 281.333 117.333"
xml:space="preserve">
<path id="slot_1" fill="#0D8900" d="M189.667,20l-1,37.667h80.667l0.333-37.333L189.667,20z M264.667,53.5L193.5,53.667l0.542-30.208
l70.625,0.708V53.5z"/>
<path id="slot_2" fill="#0D8900" d="M24,20.25l-6.002,37.667h82.668L105,20.583L24,20.25z M94.998,53.416l-70.166,0.167l4.001-29.332
l69.166,0.166L94.998,53.416z"/>
<path id="slot_3" fill="#0D8900" d="M107.997,20.25l-4.001,37.667h81.667l1.332-37.333L107.997,20.25z M179.996,53.416l-69.166,0.167
l3.001-29.332l67.164,0.166L179.996,53.416z"/>
<path id="slot_4" fill="#0D8900" d="M188.176,61.251l-1,40.669h82.668l0.333-40.337L188.176,61.251z M265.177,96.418l-73.167,0.167l0.542-30.875
l72.871-0.121L265.177,96.418z"/>
<path id="slot_5" fill="#0D8900" d="M16.996,60.25l-6.002,40.669h85.669l3.334-40.337L16.996,60.25z M90.996,96.418l-73.167,0.167l5.002-32.335
l70.166,0.166L90.996,96.418z"/>
<path id="slot_1" fill="#0D8900" d="M103.255,60.75l-3.001,40.669h83.668l1.332-40.337L103.255,60.75z M178.256,95.917l-71.167,0.167l2-31.334
l70.165,0.166L178.256,95.917z"/>
<text transform="matrix(1 0 0 1 53.1675 41.9995)" font-family="'MyriadPro-Regular'" font-size="12">A1</text>
<text transform="matrix(1 0 0 1 143.501 41.9995)" font-family="'MyriadPro-Regular'" font-size="12">A2</text>
<text transform="matrix(1 0 0 1 222.8345 41.9995)" font-family="'MyriadPro-Regular'" font-size="12">A3</text>
<text transform="matrix(1 0 0 1 53.1675 81.9995)" font-family="'MyriadPro-Regular'" font-size="12">A4</text>
<text transform="matrix(1 0 0 1 143.501 81.9995)" font-family="'MyriadPro-Regular'" font-size="12">A5</text>
<g>
<path d="M225.052,79.457L224.213,82h-1.08l2.747-8.084h1.259L229.897,82h-1.115l-0.864-2.543H225.052z M227.703,78.641
l-0.792-2.326c-0.18-0.528-0.3-1.008-0.419-1.476h-0.024c-0.12,0.479-0.251,0.972-0.408,1.463l-0.792,2.339H227.703z"/>
<path d="M235.167,74.948c-0.216-0.013-0.492,0-0.792,0.048c-1.655,0.275-2.531,1.487-2.71,2.771h0.036
c0.372-0.492,1.02-0.899,1.883-0.899c1.379,0,2.351,0.995,2.351,2.519c0,1.427-0.972,2.746-2.591,2.746
c-1.667,0-2.758-1.295-2.758-3.322c0-1.535,0.552-2.746,1.319-3.514c0.647-0.636,1.511-1.031,2.495-1.151
c0.312-0.048,0.576-0.061,0.768-0.061V74.948z M234.867,79.445c0-1.115-0.636-1.787-1.607-1.787c-0.636,0-1.224,0.396-1.511,0.96
c-0.072,0.119-0.12,0.275-0.12,0.468c0.024,1.283,0.612,2.23,1.715,2.23C234.255,81.316,234.867,80.56,234.867,79.445z"/>
</g>
</svg>
When user mouse hover any of the slot (**example like this 3d view with the transition **) need to be generated. Each slot will have unique id of the path.
This SVG path one need to generate dynamically based on the mouse hover
Here i have attached the sample svg slots For your reference.
SVG Mouse hover
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="49.667px" height="60.536px" viewBox="0 0 49.667 60.536" enable-background="new 0 0 49.667 60.536" xml:space="preserve">
<g enable-background="new ">
<g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="13.4409" y1="17.2715" x2="37.1904" y2="17.2715">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#3D3D3D"/>
</linearGradient>
<polygon fill="url(#SVGID_1_)" points="36.223,10.347 37.19,24.193 14.333,24.335 13.441,10.208 "/>
</g>
<g>
<polygon fill="#B5B6B6" points="13.955,10.157 15.333,24.333 12.667,50 11.802,27.738 "/>
</g>
<g>
<path fill="#226A36" d="M7.566,30.208l3.157-20.865l29.541-0.261l-5.008,21.522L7.566,30.208z M35.783,11.955l-21.467,0.127
l-2.514,15.656l20.296-0.267l2.449-9.984"/>
</g>
<g>
<polygon fill="#B5B6B6" points="40.348,9.097 41.223,21.717 37.514,52.217 35.256,30.603 "/>
</g>
<g>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="22.6021" y1="29.1782" x2="22.602" y2="53.7121">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#3D3D3D"/>
</linearGradient>
<polygon fill="url(#SVGID_2_)" points="35.256,30.603 37.514,51.883 8.726,51.495 7.691,30.333 "/>
</g>
</g>
</svg>
Note: SVG should be in the tiles overview
Kindly guide me how can i achive this. if you have any other easy way to achieve this, Suggestion are welcome ...