Javascript to determine if svg text is partially or entirely visible - javascript
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>
Related
Add svg on exists path
I had an exsits path that represent line with arrow:
<path {...lineProps} id={id} />
it looks like:
is there a chance to add the next svg in the middle of the current link:
<svg width="32" height="18" viewBox="0 0 32 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="18" rx="9" fill="#F8788F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6531 10.9423L12 9.28917L10.3468 10.9423L10.0577 10.6532L11.7109 9.00003L10.0577 7.34693L10.3468 7.05784L12 8.71094L13.6531 7.05784L13.9421 7.34693L12.289 9.00003L13.9421 10.6532L13.6531 10.9423Z" fill="#FEFEFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6531 11.4001L12 9.74695L10.3468 11.4001L9.59993 10.6532L11.2531 9.00003L9.59992 7.34693L10.3468 6.60006L12 8.25316L13.6531 6.60006L14.3999 7.34693L12.7468 9.00003L14.3999 10.6532L13.6531 11.4001ZM12.289 9.00003L13.9421 7.34693L13.6531 7.05784L12 8.71094L10.3468 7.05784L10.0577 7.34693L11.7109 9.00003L10.0577 10.6532L10.3468 10.9423L12 9.28917L13.6531 10.9423L13.9421 10.6532L12.289 9.00003Z" fill="#FEFEFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0001 13.7081C13.3154 13.1808 14.0955 12.8115 14.6823 11.926C15.302 10.9909 15.7984 9.31606 15.8863 5.9205C14.5265 5.74148 13.1976 5.26052 12.0002 4.4796C10.8027 5.26052 9.4738 5.74148 8.11402 5.9205C8.20188 9.31606 8.69829 10.9909 9.31803 11.926C9.90483 12.8115 10.6849 13.1808 12.0001 13.7081ZM11.7768 14.911C11.9199 14.968 12.0804 14.968 12.2235 14.911L12.2434 14.9031C15.0408 13.7903 16.9994 13.0112 17.0964 5.40383C17.1006 5.07248 16.8312 4.80237 16.5007 4.77785C15.0545 4.67052 13.6299 4.17427 12.3834 3.2891C12.1546 3.12662 11.8457 3.12662 11.6169 3.2891C10.3705 4.17427 8.94583 4.67052 7.49961 4.77785C7.16914 4.80237 6.8997 5.07248 6.90392 5.40383C7.00086 13.0112 8.95954 13.7903 11.7569 14.9031L11.7768 14.911Z" fill="#FEFEFF"/>
</svg>
it looks like:
eventually it should look like:
As #AKX commented you need to find the point in the middle of the path. You can do it using the getTotalLength and getPointAtLength methods.
As for the tag you can put it inside a symbol and use the symbol with <use>. The use element can take an x and y attributes, the x and y of the point in the middle of the path. In order to center the use element around the point you need also to translate the use element backward half width and height
//the path length
let l = thePath.getTotalLength();
//the point in the middle of the path
let p = thePath.getPointAtLength(l/2);
//set the x andy attributes in the middle of the path
theUse.setAttribute("x", p.x);
theUse.setAttribute("y", p.y);
<svg viewBox="0 0 300 200" width="300">
<symbol viewBox="0 0 32 18" fill="none" id="s">
<rect width="32" height="18" rx="9" fill="#F8788F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6531 10.9423L12 9.28917L10.3468 10.9423L10.0577 10.6532L11.7109 9.00003L10.0577 7.34693L10.3468 7.05784L12 8.71094L13.6531 7.05784L13.9421 7.34693L12.289 9.00003L13.9421 10.6532L13.6531 10.9423Z" fill="#FEFEFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6531 11.4001L12 9.74695L10.3468 11.4001L9.59993 10.6532L11.2531 9.00003L9.59992 7.34693L10.3468 6.60006L12 8.25316L13.6531 6.60006L14.3999 7.34693L12.7468 9.00003L14.3999 10.6532L13.6531 11.4001ZM12.289 9.00003L13.9421 7.34693L13.6531 7.05784L12 8.71094L10.3468 7.05784L10.0577 7.34693L11.7109 9.00003L10.0577 10.6532L10.3468 10.9423L12 9.28917L13.6531 10.9423L13.9421 10.6532L12.289 9.00003Z" fill="#FEFEFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0001 13.7081C13.3154 13.1808 14.0955 12.8115 14.6823 11.926C15.302 10.9909 15.7984 9.31606 15.8863 5.9205C14.5265 5.74148 13.1976 5.26052 12.0002 4.4796C10.8027 5.26052 9.4738 5.74148 8.11402 5.9205C8.20188 9.31606 8.69829 10.9909 9.31803 11.926C9.90483 12.8115 10.6849 13.1808 12.0001 13.7081ZM11.7768 14.911C11.9199 14.968 12.0804 14.968 12.2235 14.911L12.2434 14.9031C15.0408 13.7903 16.9994 13.0112 17.0964 5.40383C17.1006 5.07248 16.8312 4.80237 16.5007 4.77785C15.0545 4.67052 13.6299 4.17427 12.3834 3.2891C12.1546 3.12662 11.8457 3.12662 11.6169 3.2891C10.3705 4.17427 8.94583 4.67052 7.49961 4.77785C7.16914 4.80237 6.8997 5.07248 6.90392 5.40383C7.00086 13.0112 8.95954 13.7903 11.7569 14.9031L11.7768 14.911Z" fill="#FEFEFF"/>
</symbol>
<marker id="mk" viewBox="0 0 4 4" markerWidth="4" markerHeight="4" refX="0" refY="2" orient="auto-start-reverse">
<polygon points="0,0 4,2 0,4" fill="black" />
</marker>
<path id="thePath" d="M10,10 L270,160" stroke="black" stroke-width="4" stroke-dasharray="5" marker-end="url(#mk)" />
<use id="theUse" xlink:href="#s" width="32" height="18" transform="translate(-16,-9)" />
<svg>
Using SVG Pattern as Background
React-Native-svg supports SVG pattern, however, I am not sure how to apply it...
When I try the minimal example from the documentation, I get a blanc screen, white screen.
<View
style={{paddingTop: 20,
height: '100%',
flex: 1,
backgroundColor: 'white'}}>
<Svg width="100%" height="100%" viewBox="0 0 800 400">
<Defs>
<Pattern
id="TrianglePattern"
patternUnits="userSpaceOnUse"
x="0"
y="0"
width="100"
height="100"
viewBox="0 0 10 10">
<Path d="M 0 0 L 7 0 L 3.5 7 z" fill="red" stroke="blue" />
</Pattern>
</Defs>
</Svg>
</View>
Why is that?
As #Robert Longson pointed out in a comment below the Q. You need a shape (like a rect or ellipse) with the id given in the pattern. <Svg width="100%" height="100%" viewBox="0 0 800 400"> <Defs> <Pattern id="TrianglePattern" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100" viewBox="0 0 10 10" > <Path d="M 0 0 L 7 0 L 3.5 7 z" fill="red" stroke="blue" /> </Pattern> </Defs> <Rect fill="none" stroke="blue" x="1" y="1" width="798" height="398" /> <Ellipse fill="url(#TrianglePattern)" // make sure this is the id given in the pattern stroke="black" strokeWidth="5" cx="400" cy="200" rx="350" ry="150" /> </Svg>
I want to Transfer my SVG in React To React Native
I have a simple SVG code, which is a circle progress bar with an image, and I used it to change the value of progress as below, I want to have this SVG with this feature in react native,
things I tried :
react-native-SVG package, but didn't work and I get some weird behavior with it
the code in React js , the props is changed from outside so I can change any props to change progress value , and image inside , as well as the width too ,
function CircularBar({ imgSrc, progress, width }) {
return (
<svg viewBox="0 0 200 210" width={width}>
<defs>
<mask id="m1">
<circle cx="100" cy="105" r="55" fill="white" />
</mask>
<linearGradient
id="lg1"
gradientTransform="rotate(0) skewX(-20) skewY(-40)"
>
<stop offset="0" stop-color="red" />
<stop offset="75%" stop-color="orange" />
</linearGradient>
</defs>
<image mask="url(#m1)" href={imgSrc} width="200" />
<path
pathLength="360"
d="M100 175 a 75 75 0 1 1 1 0"
stroke="LightSlateGray"
fill="none"
stroke-width="30"
stroke-linecap="round"
stroke-dasharray="270 360"
stroke-dashoffset="-45"
/>
<path
pathLength="360"
d="M100 175 a 75 75 0 1 1 1 0"
stroke="url(#lg1)"
fill="none"
stroke-width="15"
stroke-linecap="round"
stroke-dasharray={`${progress * 270} 360`}
stroke-dashoffset="-45"
/>
<g
transform="translate(100 180)"
font-size="16"
font-family="sans-serif"
font-weight="bold"
text-anchor="middle"
>
<text>Overall</text>
<text transform="translate(0 20)">Wellbeing</text>
</g>
</svg>
);
}
export default CircularBar;
this is where I'm stuck, this is the code for react native side
import React from 'react';
import Svg, {
Circle,
Defs,
G,
Image,
LinearGradient,
Mask,
Path,
Stop,
Text,
} from 'react-native-svg';
function CircularBar({imgSrc, progress, width}) {
return (
<Svg width="200" height="400">
<Defs>
<Mask id="m1">
<Circle cx="100" cy="105" r="500" fill="white" />
</Mask>
<LinearGradient
id="lg1"
gradientTransform="rotate(0) skewX(-20) skewY(-40)">
<Stop offset="0" stop-color="red" />
<Stop offset="75%" stop-color="orange" />
</LinearGradient>
</Defs>
<Image mask="url(#m1)" href={imgSrc} width="200" />
<Path
pathLength="360"
d="M100 175 a 75 75 0 1 1 1 0"
stroke="#778899"
fill="none"
stroke-width="30"
stroke-linecap="round"
stroke-dasharray="270 360"
stroke-dashoffset="-45"
/>
<Path
pathLength="360"
d="M100 175 a 75 75 0 1 1 1 0"
stroke="url(#lg1)"
fill="none"
stroke-width="15"
stroke-linecap="round"
stroke-dasharray={`200 360`}
stroke-dashoffset="-45"
/>
<G
transform="translate(100 180)"
font-size="16"
font-family="sans-serif"
font-weight="bold"
text-anchor="middle">
<Text>Overall</Text>
<Text transform="translate(0 20)">Wellbeing</Text>
</G>
</Svg>
);
}
so I hope you could help me with it
I normally use https://react-svgr.com/playground/?native=true to convert my svg to a react native component.
Make sure you check react-native on the left tab.
Example raw svg
<svg width="40" height="40" viewBox="0 0 40 40" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path opacity="0.1" d="M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0
20C0 8.9543 8.9543 0 20 0C31.0457 0 40 8.9543 40 20ZM4 20C4 28.8366 11.1634 36
20 36C28.8366 36 36 28.8366 36 20C36 11.1634 28.8366 4 20 4C11.1634 4 4 11.1634
4 20Z" fill="#2B86C3"/>
<path d="M20 40C16.0979 40 12.281 38.8585 9.01954 36.7161C5.75811 34.5738
3.19463 31.5242 1.64491 27.943C0.0951845 24.3618 -0.373076 20.4054 0.297814
16.5614C0.968704 12.7174 2.74944 9.15359 5.42063 6.30906C8.09182 3.46453
11.5368 1.46353 15.3311 0.552601C19.1254 -0.358333 23.1033 -0.139414 26.7748
1.18239C30.4462 2.50419 33.6508 4.87112 35.9937 7.9916C38.3366 11.1121 39.7155
14.8498 39.9605 18.7442L35.9684 18.9954C35.7724 15.8798 34.6693 12.8897 32.795
10.3933C30.9206 7.8969 28.357 6.00335 25.4198 4.94591C22.4827 3.88847 19.3003
3.71333 16.2649 4.44208C13.2294 5.17083 10.4735 6.77162 8.3365 9.04725C6.19955
11.3229 4.77496 14.1739 4.23825 17.2491C3.70154 20.3244 4.07615 23.4894 5.31593
26.3544C6.5557 29.2193 8.60649 31.659 11.2156 33.3729C13.8248 35.0868 16.8783
36 20 36V40Z" fill="#2B86C3"/>
<path d="M12.6744 14.8182H11.1779L8.63743 16.4787V17.9503L11.0735
16.3594H11.1332V25H12.6744V14.8182ZM18.7894 25.1392C20.8377 25.1392 22.2994
23.6925 22.2944 21.7088C22.2994 19.7401 20.9272 18.3082 19.0728
18.3082C18.3171 18.3082 17.6161 18.5966 17.2184 18.9844H17.1587L17.4819
16.1357H21.8022V14.8182H16.2042L15.6325 19.9489L17.0394 20.1577C17.4222
19.8146 18.1083 19.581 18.7248 19.581C19.9329 19.5909 20.8079 20.4957 20.8079
21.7386C20.8079 22.9616 19.9577 23.8466 18.7894 23.8466C17.805 23.8466 17.0245
23.2202 16.945 22.3452H15.4535C15.5131 23.9659 16.9201 25.1392 18.7894
25.1392ZM27.655 25.169C30.0066 25.169 31.3837 23.25 31.3837 19.9141C31.3837
16.603 29.9867 14.679 27.655 14.679C25.3184 14.679 23.9263 16.598 23.9213
19.9141C23.9213 23.245 25.2985 25.1641 27.655 25.169ZM27.655 23.8416C26.2779
23.8416 25.4476 22.4595 25.4476 19.9141C25.4526 17.3786 26.2828 15.9815 27.655
15.9815C29.0222 15.9815 29.8574 17.3786 29.8574 19.9141C29.8574 22.4595
29.0272 23.8416 27.655 23.8416Z" fill="#2B86C3"/>
</svg>
after converting :
import * as React from "react"
import Svg, { Path } from "react-native-svg"
function SvgComponent(props) {
return (
<Svg
width={props.width}
height={40}
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<Path
opacity={0.1}
d="M40 20c0 11.046-8.954 20-20 20S0 31.046 0 20 8.954 0 20 0s20 8.954 20 20zM4 20c0 8.837 7.163 16 16 16s16-7.163 16-16S28.837 4 20 4 4 11.163 4 20z"
fill="#2B86C3"
/>
<Path
d="M20 40a20 20 0 1119.96-21.256l-3.992.251A16 16 0 1020 36v4z"
fill="#2B86C3"
/>
<Path
d="M12.674 14.818h-1.496l-2.54 1.66v1.472l2.435-1.59h.06V25h1.541V14.818zM18.79 25.14c2.049 0 3.51-1.447 3.505-3.43.005-1.969-1.367-3.4-3.221-3.4-.756 0-1.457.288-1.855.675h-.06l.324-2.848h4.32v-1.318h-5.598l-.572 5.13 1.407.21c.383-.343 1.07-.577 1.686-.577 1.208.01 2.083.915 2.083 2.158 0 1.223-.85 2.108-2.019 2.108-.984 0-1.765-.627-1.844-1.502h-1.492c.06 1.62 1.467 2.794 3.336 2.794zm8.866.03c2.352 0 3.729-1.919 3.729-5.255 0-3.311-1.397-5.235-3.729-5.235-2.337 0-3.729 1.919-3.734 5.235 0 3.331 1.378 5.25 3.734 5.255zm0-1.327c-1.377 0-2.207-1.383-2.207-3.928.005-2.535.835-3.933 2.207-3.933 1.367 0 2.202 1.398 2.202 3.933 0 2.545-.83 3.928-2.202 3.928z"
fill="#2B86C3"
/>
</Svg>
)
}
export default SvgComponent
and use in your component like:
import SvgComponent from '...path.../SvgComponent'
.
.
.
<View>
<SvgComponent width={40} />
<Text>your number</Text>
</View>
make your number over progress with absolute position
I specify width since I have value of width in my svg component is {props.width}
Similarly for numbers and use your own logic.
I found the solution you will have to take a raw SVG , and then used it in SVGXML from react_native_svg
let xml = `
<svg viewBox="0 0 200 210" width="100%"
>
<defs>
<linearGradient id="b" gradientTransform="matrix(1.3054 -.8391 -.36397 1 0 0)">
<stop offset="0" stop-color="red"/>
<stop offset="75%" stop-color="orange"/>
</linearGradient>
<mask id="a">
<circle cx="100" cy="100" r="55" fill="#fff"/>
</mask>
</defs>
<image mask="url(#a)" height="250" width="200" href="https://djelfa.cc/man.png" />
<path pathLength="360" d="M100 175a75 75 0 1 1 1 0" stroke="#789" fill="none" stroke-width="30" stroke-linecap="round" stroke-dasharray="270 360" stroke-dashoffset="-45"/>
<path pathLength="360" d="M100 175a75 75 0 1 1 1 0" stroke="url(#b)" fill="none" stroke-width="15" stroke-linecap="round" stroke-dasharray="${
counter ? counter * 270 : 0
} 360" stroke-dashoffset="-45"/>
<g font-size="16" font-family="sans-serif" font-weight="bold" text-anchor="middle">
<text transform="translate(100 180)">Overall</text>
<text transform="translate(100 200)">Wellbeing</text>
</g>
</svg>
`;
return <SvgXml xml={xml} width="100%" height="100%" />;
the only problem here is how to make the image fit inside the mask, I mean how to make the image contained inside it, that's the difference between my react code and this code even they are the same
How do I animate a Svg path vertically?
Move.gif I want to animate this path up and down (vertically). I use animationMotion for this, but my path is moving in different directions. <svg width="698" height="745" viewBox="0 0 698 645" fill="none" xmlns="http://www.w3.org/2000/svg"> <path id="bottom-arrow" d="M404.767 578.541L414.523 592.852L397.251 594.146L404.767 578.541Z" stroke="#EEE8FB" stroke-width="2" > <animateMotion path="M0,0 0 50 90 0 90 10" begin="0s" dur="2s" repeatCount="indefinite" /> </path> </svg> Hope you got my point
You just need to give proper path for animateMotion. In your code it should be path="M0,0 0 90 0 0" For more information, check this link <svg width="698" height="745" viewBox="0 0 698 645" fill="none" xmlns="http://www.w3.org/2000/svg"> <path id="bottom-arrow" d="M404.767 578.541L414.523 592.852L397.251 594.146L404.767 578.541Z" stroke="#EEE8FB" stroke-width="2" > <animateMotion path="M0,0 0 90 0 0" begin="0s" dur="2s" repeatCount="indefinite" /> </path> </svg>
How to reference inline svg as cursor in css style?
how to reference an inline svg as cursor?
In the code attach, first cursor declaration "cursor:pointer" an second (png) works without problems.
Third declaration doesn't work for me. What I'm doing wrong?. Only need a working sample
Thanks in advance
<?xml version='1.0' encoding='UTF-8'?>
<svg version='1.1' id='project' xmlns:svg='http://www.w3.org/2000/svg'
xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'
>
<script type='text/ecmascript'>
<style>
.boton
{
/*cursor:pointer
cursor: url(data:image/png;base64,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), auto;);
*/
cursor: url(data:image/svg+xml;utf8,<svg fill="%23FF0000" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>), auto;);
}
</style>
</script>
<g id="toggleInsertaElementoLS" class="boton" toggleButton="true" triStateButton="false">
<path id="bordeLS" fill="url(#rellenoBotonesInsercion)" stroke="#000000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M6.875,282.375h46c1.104,0,2,0.895,2,2v21c0,1.104-0.896,2-2,2h-46c-1.104,0-2-0.896-2-2v-21
C4.875,283.27,5.771,282.375,6.875,282.375z"/>
<g id="dibujoLS">
<path fill="#660000" stroke="#660000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="3" d="
M22.46,296.273v-9.67h1.28v8.529h4.763v1.141H22.46z"/>
<path fill="#660000" stroke="#660000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="3" d="
M29.59,293.156l1.209-0.104c0.055,0.479,0.188,0.881,0.398,1.188c0.207,0.313,0.533,0.563,0.973,0.752
c0.44,0.191,0.933,0.285,1.482,0.285c0.489,0,0.92-0.074,1.293-0.217c0.374-0.146,0.652-0.346,0.834-0.6
c0.182-0.25,0.276-0.527,0.276-0.826c0-0.31-0.088-0.57-0.264-0.795c-0.178-0.229-0.464-0.414-0.871-0.57
c-0.26-0.1-0.833-0.26-1.719-0.471c-0.891-0.216-1.511-0.416-1.867-0.604c-0.462-0.241-0.806-0.543-1.03-0.896
c-0.23-0.359-0.342-0.77-0.342-1.205c0-0.49,0.138-0.943,0.417-1.371c0.275-0.422,0.679-0.748,1.213-0.965
c0.532-0.229,1.124-0.332,1.775-0.332c0.716,0,1.349,0.117,1.897,0.346c0.548,0.232,0.967,0.57,1.264,1.021
c0.292,0.438,0.453,0.945,0.475,1.521l-1.227,0.09c-0.064-0.604-0.288-1.063-0.667-1.383c-0.382-0.313-0.944-0.469-1.688-0.469
c-0.772,0-1.337,0.141-1.691,0.428c-0.354,0.281-0.531,0.625-0.531,1.025c0,0.346,0.126,0.631,0.375,0.854
c0.245,0.229,0.889,0.453,1.931,0.689c1.038,0.229,1.752,0.438,2.14,0.617c0.563,0.258,0.979,0.588,1.246,0.979
c0.267,0.396,0.403,0.857,0.403,1.375c0,0.521-0.148,1.002-0.442,1.455s-0.716,0.813-1.269,1.063
c-0.554,0.256-1.172,0.383-1.864,0.383c-0.876,0-1.608-0.127-2.199-0.385c-0.593-0.262-1.056-0.646-1.392-1.148
C29.784,294.389,29.607,293.811,29.59,293.156z"/>
<line shape-rendering="geometricPrecision" fill="none" stroke="#2F5F9E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="3" x1="8" y1="301.125" x2="51.75" y2="301.125"/>
</g>
</g>
</svg>
It works once I cleaned up the syntax a little i.e. the extraneous brackets and semicolons.
The cursor is the one you provided.
.boton {
cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23FF0000" height="48" viewBox="0 0 24 24" width="48"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>'), auto;
}
<?xml version='1.0' encoding='UTF-8'?>
<svg version='1.1' id='project' xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'
>
<rect class="boton" width="100%" height="100%" fill="blue"/>
</svg>