SVG cannot be displayed as an image - javascript
I've got svg string file on database. I want to show it on my Asp.Net Core projects view. I'm calling my data as Model from controller. When I'm trying to do it, it displays as text on my page. Here is my svg:
And here is my code on Index.cshtml file:
#foreach (var item in Model)
{
<div>
<div>
<div id="svg-#item.ID"></div>
<script>
debugger;
var newSvg = '#item.SVG';
var svg = document.getElementById('svg-' + '#item.ID');
svg.append(newSvg);
</script>
</div>
</div>
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" width="100%" viewBox="0 0 2250 1950">
<g>
<g fill="#aaffff" stroke="black" stroke-width="4">
<path id="glass" d="M892.5 293 L343 293 L343 1457 L892.5 1457z"/>
<path id="glass" d="M983.5 1407 L1707 1407 L1707 343 L983.5 343z"/>
</g>
<g stroke="black">
<g name="ProfileGroup0-profileundefined" stroke-width="3" fill="#ffffff">
<path d="M300 250 L300 1500 L343 1457 L343 293z"/>
<path d="M300 1500 L1800 1500 L1757 1457 L343 1457z"/>
<path d="M1800 1500 L1800 250 L1757 293 L1757 1457z"/>
<path d="M1800 250 L300 250 L343 293 L1757 293z"/>
<path d="M892.5 293 L892.5 1457 L933.5 1457 L933.5 293z" name="ProfileGroup0-profileundefinedVerticalCentervertical-center-profile0"/>
</g>
<g name="ProfileGroup0-profileundefinedSash0-sash-profile0" stroke-width="3" fill="#ffffff">
<path d="M925.5 1465 L1765 1465 L1707 1407 L983.5 1407z"/>
<path d="M1765 1465 L1765 285 L1707 343 L1707 1407z"/>
<path d="M1765 285 L925.5 285 L983.5 343 L1707 343z"/>
<path d="M925.5 285 L925.5 1465 L983.5 1407 L983.5 343z"/>
</g>
<path d="M166.53439331054688 250 L166.53439331054688 803.1251507979999 M166.53439331054688 946.874849202 L166.53439331054688 1500 M150.97193854994686 1463.6876055586 L166.53439331054688 1500 L182.0968480711469 1463.6876055586 M150.97193854994686 286.31239444140004 L166.53439331054688 250 L182.0968480711469 286.31239444140004z" stroke-width="3.890613690150002" fill="#ffffff"/>
<text x="57.08134549943752" y="906.874849202" font-size="103.74969840400006" zoom="0.19277164471476577">1250</text>
<path d="M300 1663.7496984040001 L914.6095275878906 1663.7496984040001 M1185.3904724121094 1663.7496984040001 L1800 1663.7496984040001 M1763.6876055586 1679.3121531646002 L1800 1663.7496984040001 L1763.6876055586 1648.1872436434 M336.31239444140004 1679.3121531646002 L300 1663.7496984040001 L336.31239444140004 1648.1872436434z" stroke-width="3.890613690150002" fill="#ffffff"/>
<text x="940.5469521888906" y="1695.6245476060003" font-size="103.74969840400006" zoom="0.19277164471476577">1500</text>
<path d="M1933.4656066894531 250 L1933.4656066894531 803.1251507979999 M1933.4656066894531 946.874849202 L1933.4656066894531 1500 M1917.9031519288533 1463.6876055586 L1933.4656066894531 1500 L1949.028061450053 1463.6876055586 M1917.9031519288533 286.31239444140004 L1933.4656066894531 250 L1949.028061450053 286.31239444140004z" stroke-width="3.890613690150002" fill="#ffffff"/>
<text x="1824.0125588783437" y="906.874849202" font-size="103.74969840400006" zoom="0.19277164471476577">1250</text>
<path d="M300 86.25030159599993 L914.6095275878906 86.25030159599993 M1185.3904724121094 86.25030159599993 L1800 86.25030159599993 M1763.6876055586 101.81275635659995 L1800 86.25030159599993 L1763.6876055586 70.68784683539991 M336.31239444140004 101.81275635659995 L300 86.25030159599993 L336.31239444140004 70.68784683539991z" stroke-width="3.890613690150002" fill="#ffffff"/>
<text x="940.5469521888906" y="118.12515079799995" font-size="103.74969840400006" zoom="0.19277164471476577">1500</text>
<path d="M300 158.12515079799994 L499.95714569091797 158.12515079799994 M713.042854309082 158.12515079799994 L913 158.12515079799994 M876.6876055585999 173.68760555859996 L913 158.12515079799994 L876.6876055585999 142.56269603739992 M336.31239444140004 173.68760555859996 L300 158.12515079799994 L336.31239444140004 142.56269603739992z" stroke-width="3.890613690150002" fill="#ffffff"/>
<text x="525.894570291918" y="189.99999999999994" font-size="103.74969840400006" zoom="0.19277164471476577">613</text>
<path d="M913 158.12515079799994 L1249.957145690918 158.12515079799994 M1463.042854309082 158.12515079799994 L1800 158.12515079799994 M1763.6876055586 173.68760555859996 L1800 158.12515079799994 L1763.6876055586 142.56269603739992 M949.3123944414001 173.68760555859996 L913 158.12515079799994 L949.3123944414001 142.56269603739992z" stroke-width="3.890613690150002" fill="#ffffff"/>
<text x="1275.894570291918" y="189.99999999999994" font-size="103.74969840400006" zoom="0.19277164471476577">887</text>
</g>
<g>
<line x1="1707" y1="343" x2="983.5" y2="875" stroke="black"/>
<line x1="983.5" y1="875" x2="1707" y2="1407" stroke="black"/>
<image xlink:href="https://herofis.com/documents/company/1000006/stockpictures/orginal/201902220355008321.png" width="28" height="140" x="-967.5" y="845" transform="scale(-1,1) rotate(0,-954.5,875)"/>
<g>
<image xlink:href="https://herofis.com/documents/company/1000006/stockpictures/orginal/201902190440564245.png" width="15" height="75" x="1757" y="-1387" transform="scale(1,-1) rotate(-180,1757,-1357)"/>
<image xlink:href="https://herofis.com/documents/company/1000006/stockpictures/orginal/201902190440564245.png" width="15" height="75" x="1757" y="-899.5" transform="scale(1,-1) rotate(-180,1757,-869.5)"/>
<image xlink:href="https://herofis.com/documents/company/1000006/stockpictures/orginal/201902190440564245.png" width="15" height="75" x="1757" y="-412" transform="scale(1,-1) rotate(-180,1757,-382)"/>
</g>
</g>
</g>
</svg>
How can fix this?
UPDATE:
You have a namespace issue. Try xml linq like this
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Xml;
using System.Xml.Linq;
using System.IO;
namespace ConsoleApplication1
{
class Program
{
const string FILENAME = #"c:\temp\test.xml";
static void Main(string[] args)
{
string xml = File.ReadAllText(FILENAME);
XDocument doc = XDocument.Parse(xml);
//use following from a filename
//XDocument doc = XDocument.Load(FILENAME);
List<XElement> svgs = doc.Descendants().Where(x => x.Name.LocalName == "svg").ToList();
foreach (XElement svg in svgs)
{
//you may need to encode
//string encodedXml = System.Net.WebUtility.HtmlEncode(svg.ToString());
//Console.WriteLine(encodedXml);
Console.WriteLine(svg.ToString());
}
Console.ReadLine();
}
}
}
I've solved problem. I used #Html.Raw(Model.SVG) on view, SVG files are now displayed.
Related
SVG rendering not working after updating React from 17 to 18
I have an SVG in my react component, it is used like this:
import logo from './logo.svg';
// and then in JSX
<img src={logo} alt="logo"/>
It worked well until I updated react to 18.
I am getting this error now:
Compiled with problems:X
ERROR in ./src/logo.svg
Module build failed (from ./node_modules/#svgr/webpack/lib/index.js):
SyntaxError: unknown file: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.
5 | ...props
6 | }, svgRef) {
> 7 | return <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="131.16136mm" height="95.620743mm" viewBox="0 0 464.74498 338.81365" id="svg2" inkscape:version="0.91 r13725" sodipodi:docname="surfing-js.svg" inkscape:export-filename="F:\\\\dev\\\\graphics\\\\gophers\\\\svg-rasterized\\\\surfing-js.png" inkscape:export-xdpi={134.17} inkscape:export-ydpi={134.17} ref={svgRef} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<defs id="defs4"><linearGradient inkscape:collect="always" id="linearGradient4289"><stop style={{
| ^^^^^^^^
8 | stopColor: "#00dce2",
9 | stopOpacity: 1
10 | }} offset={0} id="stop4291" /><stop style={{
at File.buildCodeFrameError (/Users/myusr/projects/testpj/node_modules/#babel/core/lib/transformation/file/file.js:209:12)
I found this SO question and tried converting tags to camel case. But after I have done that my CSV is not rendered correctly. Besides I would prefer not to edit it (not to say I don't understand a single line of code in it).
The other solutions suggested was to adjust babel config, at the same time I found this GithHub issue where it is recommended not to do that either.
Question: How to overcome this SVG rendering issue without having to significantly adjust project configuration and having to change the SVG code?
I would appreciate any suggestions.
Here is my CSV if you need it.
As suggested in other SO posts linked in question, we need to convert all attribute names to camelcase for them to work in react.js. There are certain attributes that are not recognised by react like "xmlns:dc" and if you try to convert them into camel case, you might get error like below
React does not recognize the `xmlnsDc` prop on a DOM element
But such attributes can be safely removed from SVG files as they won't impact the image.
Sharing converted react component for SVG file you shared:
import React from "react";
const MySVG = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
width="495.728"
height="361.401"
version="1.1"
viewBox="0 0 464.745 338.814"
>
<defs>
<linearGradient id="linearGradient4289">
<stop offset="0" stopColor="#00dce2" stopOpacity="1"></stop>
<stop offset="1" stopColor="#97f0ff" stopOpacity="1"></stop>
</linearGradient>
<linearGradient
id="linearGradient4295"
x1="431.334"
x2="400.666"
y1="531.393"
y2="386.128"
gradientTransform="translate(129.453 193.74)"
gradientUnits="userSpaceOnUse"
xlinkHref="#linearGradient4289"
></linearGradient>
</defs>
<g display="inline" transform="translate(-111.737 -176.023)">
<path
fill="url(#linearGradient4295)"
fillOpacity="1"
fillRule="evenodd"
stroke="none"
strokeLinecap="butt"
strokeLinejoin="miter"
strokeOpacity="1"
strokeWidth="1"
d="M132.042 433.463c23.84-32.316 103.542-15.624 130.056.606 89.595 44.02 169.113-19.05 186.402-33.707 42.52-37.92 60.763-37.33 75.655-30.124 4.45 2.154 10.795 11.465 14.408 12.5 98.104 111.17-186.007 131.629-317.798 102.342-60.452-13.433-102.376-33.11-88.723-51.617z"
></path>
</g>
<g display="none" transform="translate(-111.737 -176.023)">
<path
fill="#f3df49"
fillOpacity="1"
fillRule="evenodd"
stroke="none"
strokeLinecap="butt"
strokeLinejoin="miter"
strokeOpacity="1"
strokeWidth="1"
d="M132.042 433.463c23.84-32.316 103.542-15.624 130.056.606 89.595 44.02 169.113-19.05 186.402-33.707 42.52-37.92 60.763-37.33 75.655-30.124 4.45 2.154 10.795 11.465 14.408 12.5 98.104 111.17-186.007 131.629-317.798 102.342-60.452-13.433-102.376-33.11-88.723-51.617z"
></path>
</g>
<g transform="translate(17.717 17.717)">
<path
fill="#2e2e2c"
fillOpacity="1"
d="M397.824 203.03c-2.159.004-4.045.321-5.6.972-1.554.651-2.778 1.63-3.645 2.857-.866 1.227-1.375 2.699-1.529 4.306-.153 1.607.049 3.349.582 5.126.579 1.93 1.307 3.55 2.192 4.91a13.088 13.088 0 003.107 3.348c1.182.895 2.503 1.59 3.932 2.165 1.428.575 2.962 1.03 4.566 1.444l.553.146.548.15.544.152.54.155c.982.297 1.843.588 2.584.913.74.325 1.364.677 1.87 1.086.506.41.895.875 1.153 1.453.258.577.386 1.265.358 2.152a5.951 5.951 0 01-.47 2.131 6.491 6.491 0 01-1.208 1.864 7.522 7.522 0 01-1.858 1.459 8.952 8.952 0 01-2.42.918c-1.06.24-2.007.293-2.854.183a5.78 5.78 0 01-2.27-.79c-.672-.405-1.267-.943-1.811-1.577-.545-.634-1.037-1.364-1.507-2.154l-1.985 1.807-2.038 1.863-2.09 1.915-2.142 1.96c.653 1.394 1.473 2.66 2.469 3.74a11.564 11.564 0 003.52 2.618c1.353.647 2.886 1.049 4.598 1.16 1.712.11 3.601-.072 5.668-.572 2.113-.512 4.089-1.296 5.865-2.332 1.777-1.035 3.355-2.321 4.663-3.833a16.57 16.57 0 003.055-5.187 17.519 17.519 0 001.046-6.319c-.046-2.03-.392-3.575-.957-4.93-.565-1.354-1.35-2.504-2.325-3.564-.976-1.06-2.123-1.878-3.477-2.66a23.428 23.428 0 00-4.756-2.066l-.546-.168-.554-.16-.56-.157-.57-.14a34.934 34.934 0 01-2.614-.735c-.76-.255-1.408-.529-1.952-.849-.544-.32-.983-.686-1.331-1.128-.348-.441-.605-.957-.792-1.578a3.249 3.249 0 01-.124-1.428c.067-.442.244-.843.525-1.183.281-.34.667-.617 1.15-.817.484-.2 1.065-.32 1.733-.354a8.835 8.835 0 011.843.09 7.096 7.096 0 011.677.485 7.75 7.75 0 011.552.897c.503.37 1 .815 1.513 1.346l1.164-1.306 1.08-1.395 1.126-1.449 1.302-1.465c-.991-1.037-1.863-1.841-2.77-2.497-.906-.656-1.868-1.17-3.04-1.614a20.581 20.581 0 00-3.912-1.033c-1.382-.225-2.43-.278-4.371-.33 0 0 1.894-.003 0 0zm-35.9 4.18l2.956 8.923 2.485 8.916 1.614 9.051.648 9.272a9.355 9.355 0 01-.439 3.521c-.309.977-.768 1.768-1.352 2.408-.584.64-1.294 1.13-2.115 1.507-.82.376-1.752.64-2.78.827-1.073.196-1.992.196-2.801.044a5.873 5.873 0 01-2.145-.869c-.636-.412-1.207-.934-1.756-1.523-.549-.59-1.077-1.246-1.625-1.93l-2.483 1.763-2.427 1.737-2.357 1.71-2.276 1.68c-1.22.901 1.792 2.467 2.93 3.515a15.408 15.408 0 003.934 2.65c1.492.697 3.171 1.185 5.068 1.395 1.897.21 4.013.141 6.381-.281 2.622-.468 5.04-1.253 7.208-2.352 2.168-1.098 4.086-2.511 5.705-4.232a19.5 19.5 0 003.883-6.069c.94-2.32 1.683-4.968 1.511-7.8l-.473-9.292-1.59-8.98-2.622-8.769-3.26-8.728-2.891.48-2.94.48-2.98.476z"
display="inline"
></path>
</g>
<g
strokeDasharray="none"
strokeLinejoin="round"
strokeMiterlimit="4"
strokeOpacity="1"
strokeWidth="2"
transform="translate(-111.737 -176.023)"
>
<path
fill="#388e3c"
fillOpacity="1"
fillRule="evenodd"
stroke="#000"
strokeLinecap="butt"
d="M198.79 380.429c.258-2.631 4.098-13.37 31.374-.952 87.587 39.873 172.374 28.761 238.086 1.513-35.446 31.74-105.09 70.96-151.5 82.622-33.173-.25-69.22-8.332-91.922-33.79-10.377-11.637-27.083-38.739-26.038-49.393z"
display="inline"
></path>
<ellipse
cx="280.876"
cy="474.384"
fill="#1b5e2f"
fillOpacity="0.941"
stroke="none"
strokeDashoffset="0"
strokeLinecap="round"
opacity="1"
rx="83.288"
ry="22.62"
transform="matrix(.9852 -.1714 .13103 .99138 0 0)"
></ellipse>
</g>
<g
stroke="#000"
strokeOpacity="1"
transform="translate(-111.737 -176.023)"
>
<path
fill="#8ed4fe"
fillOpacity="1"
fillRule="evenodd"
strokeDasharray="none"
strokeLinecap="round"
strokeLinejoin="miter"
strokeMiterlimit="4"
strokeWidth="2.367"
d="M369.51 223.971c8.7-7.655 16.286-10.658 23.079-7.257 4.975 2.49 3.88 9.206.186 14.35-4.404 6.131-8.49 9.32-8.744 9.31"
display="inline"
opacity="1"
></path>
<path
fill="#000"
fillOpacity="1"
fillRule="evenodd"
strokeLinecap="butt"
strokeLinejoin="miter"
strokeWidth="0.395"
d="M377.176 235.834c.04.824 4.25 3.422 5.457 3.096 1.767-.477 8.642-9.057 8.6-10.83-.114-4.972-14.082 7.2-14.057 7.734z"
display="inline"
opacity="1"
></path>
<path
fill="#8ed4fd"
fillOpacity="1"
strokeDasharray="none"
strokeDashoffset="0"
strokeLinecap="round"
strokeLinejoin="bevel"
strokeMiterlimit="4"
strokeWidth="2"
d="M388.092 315.25c1.496-1.405 4.867-1.942 7.212-3.04 4.645-2.175 7.611-5.532 6.625-7.496-.985-1.965-5.55-1.794-10.195.382-2.244 1.052-4.386 1.93-6.409 2.138"
display="inline"
opacity="1"
></path>
<path
fill="#8ed4fd"
fillOpacity="1"
fillRule="evenodd"
strokeDasharray="none"
strokeLinecap="butt"
strokeLinejoin="miter"
strokeMiterlimit="4"
strokeWidth="4"
d="M298.548 433.973c-13.22-2.143-19.679-12.58-26.607-23.445-39.8-62.416-31.281-150.252-11.383-173.744 28.95-34.182 95.759-33.51 125.692 5.328 23.506 26.833-1.187 59.973-.604 88.64 42.218 17.603 36.354 74.36 36.354 74.36s-29.164-3.515-46.414.485c-13.469 3.124-29.732 10.114-48.81 19.564-9.17 4.542-16.54 10.707-28.228 8.812z"
></path>
<path
fill="#8ed4fd"
fillOpacity="1"
strokeDasharray="none"
strokeDashoffset="0"
strokeLinecap="round"
strokeLinejoin="bevel"
strokeMiterlimit="4"
strokeWidth="4"
d="M250.55 329.788c-2.015 1.902-6.565 2.64-9.73 4.129-6.264 2.955-10.258 7.499-8.92 10.148 1.339 2.65 7.503 2.403 13.769-.553 3.025-1.428 5.915-2.621 8.646-2.91"
display="inline"
opacity="1"
></path>
<path
fill="none"
fillRule="evenodd"
strokeLinecap="butt"
strokeLinejoin="miter"
strokeWidth="1"
d="M391.384 334.295c-9.823-5.145-22.274-2.475-22.274-2.475"
></path>
<path
fill="#8ed4fd"
fillOpacity="1"
strokeDasharray="none"
strokeDashoffset="0"
strokeLinecap="round"
strokeLinejoin="bevel"
strokeMiterlimit="4"
strokeWidth="4"
d="M286.83 422.587c6.996 10.92 1.841 23.67 8.24 25.193 5.237 1.246 10.83-11.015 16.597-20.235"
display="inline"
opacity="1"
></path>
<circle
cx="312.057"
cy="259.305"
r="33.415"
fill="#fff"
fillOpacity="1"
strokeDasharray="none"
strokeDashoffset="0"
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="4"
strokeWidth="3"
opacity="1"
></circle>
<ellipse
cx="383.257"
cy="275.775"
fill="#fff"
fillOpacity="1"
strokeDasharray="none"
strokeDashoffset="0"
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="4"
strokeWidth="2.806"
opacity="1"
rx="23.077"
ry="24.17"
></ellipse>
<g
fillOpacity="1"
strokeDasharray="none"
strokeMiterlimit="4"
transform="translate(4.328 .457)"
>
<path
fill="#fff"
fillRule="evenodd"
strokeLinecap="butt"
strokeLinejoin="miter"
strokeWidth="2.564"
d="M335.728 298.82c-1.108 3.632-.698 12.213-.698 12.213l10.475 3.152s4.853-5.714 5.444-7.781c.592-2.068.338-3.207.338-3.207z"
display="inline"
opacity="1"
></path>
<path
fill="#d3b78d"
fillRule="evenodd"
strokeLinecap="butt"
strokeLinejoin="miter"
strokeWidth="2.564"
d="M327.716 292.849c-7.616 7.896 4.591 8.084 14.163 10.196 7.577 1.67 16.83 10.159 19.098 2.508 3.92-13.223-23.494-22.831-33.261-12.704z"
display="inline"
opacity="1"
></path>
<ellipse
cx="420.17"
cy="-167.764"
fill="#000"
strokeDashoffset="0"
strokeLinecap="round"
strokeLinejoin="bevel"
strokeWidth="1.923"
display="inline"
opacity="1"
rx="11.351"
ry="6.498"
transform="scale(1 -1) rotate(-18.249)"
></ellipse>
</g>
<circle
cx="324.338"
cy="267.016"
r="8.853"
fill="#000"
fillOpacity="1"
strokeDasharray="none"
strokeDashoffset="0"
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="4"
strokeWidth="2.285"
opacity="1"
></circle>
<circle
cx="392.334"
cy="283.759"
r="6.781"
fill="#000"
fillOpacity="1"
strokeDasharray="none"
strokeDashoffset="0"
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="4"
strokeWidth="1.75"
opacity="1"
></circle>
<path
fill="#8ed4fe"
fillOpacity="1"
fillRule="evenodd"
strokeDasharray="none"
strokeLinecap="round"
strokeLinejoin="miter"
strokeMiterlimit="4"
strokeWidth="2.913"
d="M278.198 228.795c-3.902-10.61-2.26-20.229 2.508-28.163 3.346-5.568 7.803-6.188 11.596-4.822 6.332 2.281 9.116 9.465 12.68 20.664"
display="inline"
opacity="1"
></path>
<path
fill="#000"
fillOpacity="1"
fillRule="evenodd"
strokeLinecap="butt"
strokeLinejoin="miter"
strokeWidth="0.486"
d="M288.665 223.718c.788.64 5.95-1.759 7.315-2.47 2.72-1.417.131-13.619-2.11-15.238-4.96-3.583-5.716 17.294-5.205 17.708z"
display="inline"
opacity="1"
></path>
</g>
<g display="inline" transform="translate(-111.737 -176.023)">
<path
fill="#4caf50"
fillOpacity="1"
fillRule="evenodd"
stroke="#000"
strokeDasharray="none"
strokeLinecap="butt"
strokeLinejoin="round"
strokeMiterlimit="4"
strokeOpacity="1"
strokeWidth="2"
d="M199.505 378.716c-3.003 5.856-4.34 9.43-3.462 28.282 21.667 47.77 122.45 97.485 235.386 8.578 16.785-13.214 43.013-41.156 70.714-46.428 20.44-3.89 35.552 12.637 35.552 12.637l-9.17-19.116c-10.613-21.217-55.799-16.392-82.11 2.943-35.088 25.784-70.3 86.105-142.844 83.536-79.713-2.823-108.82-63.392-104.066-70.432z"
></path>
</g>
</svg>
);
};
export default MySVG;
Also, sharing codesandbox with running code for reference - https://codesandbox.io/s/gallant-bush-spg49f.
As stated by Raeesaa, it seems like a camelCase problem. There are online tools for adjusting the SVGs with one click, like svg2jsx. Yet... I've done some research on the error. Something is wrong on the bundling of #svgr/webpack. On the first example, you used it as a relative url to 'img' tag 'src' attribute. If you are not using it as <Logo /> somewhere, then it might be something related to how webpack is configured to handle SVGs on create-react-app (have you heard of vite?). If your project was bootstrapped with CRA, try the first solution from this issue reply: "1. put #svgr/webpack to your package.json of your project." npm i #svgr/webpack
Webpack is considering svg as react component. we need to prevent it. One quick solution would be to rename the svg file extension to svgz (another valid format for svg files) It implies that this file is a compressed svg don't consider this as react component
Don't import the image. Instead use them directly:
<img src={"./logo.svg"} alt="logo"/>
svg could be import as an element and get get rendered directly.
import ModuleIcon from 'src/assert/icons/module.svg'
...//your code here
<div>
<ModuleIcon/>
<div/>
and somewhere you could config this
declare module '*.svg' {
import React = require('react');
const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
export default ReactComponent;
}
You don't even have to wrap it in the img tag
I'm assuming you are referring to the following error: Compiled with problems:X ERROR in ./src/logo.svg Module build failed (from ./node_modules/#svgr/webpack/lib/index.js): SyntaxError: unknown file: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set throwIfNamespace: false to bypass this warning.
why the path code change when I resave an SVG in illustrator
Hi so I don't have much experience in this so I'm little confused why the SVG xml code change after I resave it in illustrator ? are the path change to anther type ?
this how SVG paths looks in notepad++ in it original form
<svg width="82" height="79" viewBox="0 0 82 79" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M69.8096 42.6079C74.6204 40.529 82.5999 32.8914 80.7182 28.5365C78.8363 24.1817 67.8057 24.7589 62.9949 26.8378C58.1841 28.9167 55.8098 34.1321 57.6916 38.487C59.5734 42.8418 64.9988 44.6868 69.8096 42.6079Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M18.262 77.0413C13.9762 77.0413 11.3323 72.3624 13.5434 68.6911L22.1862 54.3413H31.1007L23.3735 73.5855C22.5352 75.6732 20.5117 77.0413 18.262 77.0413Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M30.6561 77.0408C26.506 77.0408 23.6702 72.8464 25.2166 68.9952L31.1008 54.3408H40.0154L36.4032 72.333C35.8535 75.071 33.4486 77.0408 30.6561 77.0408Z" fill="#8CCDE9"/>
<path d="M30.6561 77.0408C26.506 77.0408 23.6702 72.8464 25.2166 68.9952L31.1008 54.3408H40.0154L36.4032 72.333C35.8535 75.071 33.4486 77.0408 30.6561 77.0408Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M42.8632 77.0408C39.0333 77.0408 36.1615 73.5353 36.9154 69.7803L40.0151 54.3408H48.9297V70.9744C48.9297 74.3249 46.2137 77.0408 42.8632 77.0408Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M36.7022 7.27252L36.7021 7.2725C35.541 6.44538 34.1189 6.13104 32.6829 6.39418C31.5026 6.61168 30.3708 5.82862 30.1544 4.65001L30.1543 4.64978C29.938 3.47011 30.7189 2.33811 31.8989 2.12176L31.8989 2.12175C34.4879 1.64722 37.0936 2.21797 39.2224 3.73449C41.3293 5.23543 42.7629 7.53373 43.1473 10.0543C43.3282 11.2401 42.5135 12.3474 41.3286 12.5286C41.2173 12.5458 41.1071 12.5538 40.9989 12.5538C39.9432 12.5538 39.0174 11.7851 38.8533 10.7093L36.7022 7.27252ZM36.7022 7.27252C37.8684 8.10321 38.6478 9.36211 38.8533 10.7092L36.7022 7.27252Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M67.0963 39.3012C67.0963 22.2743 55.4126 8.47119 41.0001 8.47119C26.5876 8.47119 14.9038 22.2743 14.9038 39.3012C14.9038 56.3281 26.5876 61.8259 41.0001 61.8259C55.4126 61.8259 67.0963 56.3281 67.0963 39.3012Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M34.1577 36.4794C36.7419 36.4794 38.8368 34.8111 38.8368 32.7531C38.8368 30.6952 36.7419 29.0269 34.1577 29.0269C31.5735 29.0269 29.4786 30.6952 29.4786 32.7531C29.4786 34.8111 31.5735 36.4794 34.1577 36.4794Z" fill="#FFA6BB"/>
<path d="M59.5204 36.4794C62.1045 36.4794 64.1994 34.8111 64.1994 32.7531C64.1994 30.6952 62.1045 29.0269 59.5204 29.0269C56.9362 29.0269 54.8413 30.6952 54.8413 32.7531C54.8413 34.8111 56.9362 36.4794 59.5204 36.4794Z" fill="#FFA6BB"/>
<path d="M46.1742 25.9936L43.1262 29.6736C42.6048 30.3031 42.6801 31.2334 43.2959 31.7709L45.8273 33.9801C46.4073 34.4862 47.2718 34.4862 47.8518 33.9801L50.3832 31.7709C50.999 31.2334 51.0743 30.3031 50.5529 29.6736L47.505 25.9936C47.1595 25.5764 46.5196 25.5764 46.1742 25.9936Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M39.1124 29.8698C38.4652 29.8698 37.9405 29.3452 37.9405 28.6979C37.9405 28.1159 37.4671 27.6426 36.8852 27.6426C36.3034 27.6426 35.8301 28.1159 35.8301 28.6979C35.8301 29.3452 35.3054 29.8698 34.6582 29.8698C34.011 29.8698 33.4863 29.3452 33.4863 28.6979C33.4863 26.8237 35.011 25.2988 36.8852 25.2988C38.7595 25.2988 40.2843 26.8237 40.2843 28.6979C40.2843 29.3451 39.7598 29.8698 39.1124 29.8698Z" fill="black"/>
<path d="M59.021 29.8698C58.3736 29.8698 57.8491 29.3452 57.8491 28.6979C57.8491 28.1159 57.3757 27.6426 56.7938 27.6426C56.2119 27.6426 55.7385 28.1159 55.7385 28.6979C55.7385 29.3452 55.2139 29.8698 54.5666 29.8698C53.9192 29.8698 53.3947 29.3452 53.3947 28.6979C53.3947 26.8237 54.9196 25.2988 56.7938 25.2988C58.668 25.2988 60.1928 26.8237 60.1928 28.6979C60.1928 29.3451 59.6683 29.8698 59.021 29.8698Z" fill="black"/>
<path d="M38.3904 66.1445C36.7035 66.1445 35.3362 64.7771 35.3362 63.0903V59.7134C35.3362 58.0265 36.7035 56.6592 38.3904 56.6592C40.0773 56.6592 41.4446 58.0265 41.4446 59.7134V63.0903C41.4446 64.7771 40.0773 66.1445 38.3904 66.1445Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M54.2496 66.1445C55.9365 66.1445 57.3038 64.7771 57.3038 63.0903V59.7134C57.3038 58.0265 55.9365 56.6592 54.2496 56.6592C52.5627 56.6592 51.1954 58.0265 51.1954 59.7134V63.0903C51.1954 64.7771 52.5627 66.1445 54.2496 66.1445Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M12.1904 42.6079C7.37966 40.529 -0.599872 32.8914 1.28185 28.5365C3.16372 24.1817 14.1943 24.7589 19.0051 26.8378C23.8159 28.9167 26.1903 34.1321 24.3084 38.487C22.4267 42.8418 17.0012 44.6868 12.1904 42.6079Z" fill="white" stroke="#222222" stroke-width="2"/>
</svg>
and this after I resave it in illustrator without changing any thing
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-308 411 82 79"
style="enable-background:new -308 411 82 79;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;stroke:#222222;stroke-width:2;}
.st1{fill:#8CCDE9;}
.st2{fill:#FFA6BB;}
</style>
<metadata>
<sfw xmlns="&ns_sfw;">
<slices></slices>
<sliceSourceBounds width="82" height="77.1" bottomLeftOrigin="true" x="0" y="1"></sliceSourceBounds>
</sfw>
</metadata>
<path class="st0" d="M-238.2,453.6c4.8-2.1,12.8-9.7,10.9-14.1c-1.9-4.4-12.9-3.8-17.7-1.7c-4.8,2.1-7.2,7.3-5.3,11.6
C-248.4,453.8-243,455.7-238.2,453.6z"/>
<path class="st0" d="M-289.7,488c-4.3,0-6.9-4.7-4.7-8.4l8.6-14.3h8.9l-7.7,19.2C-285.5,486.7-287.5,488-289.7,488z"/>
<path class="st1" d="M-277.3,488c-4.2,0-7-4.2-5.4-8l5.9-14.7h8.9l-3.6,18C-272.1,486.1-274.6,488-277.3,488z"/>
<path class="st0" d="M-277.3,488c-4.2,0-7-4.2-5.4-8l5.9-14.7h8.9l-3.6,18C-272.1,486.1-274.6,488-277.3,488z"/>
<path class="st0" d="M-265.1,488c-3.8,0-6.7-3.5-5.9-7.3l3.1-15.4h8.9V482C-259.1,485.3-261.8,488-265.1,488z"/>
<path class="st0" d="M-271.3,418.3L-271.3,418.3c-1.2-0.8-2.6-1.1-4-0.9c-1.2,0.2-2.3-0.6-2.5-1.7l0,0c-0.2-1.2,0.6-2.3,1.7-2.5l0,0
c2.6-0.5,5.2,0.1,7.3,1.6c2.1,1.5,3.5,3.8,3.9,6.3c0.2,1.2-0.6,2.3-1.8,2.5c-0.1,0-0.2,0-0.3,0c-1.1,0-2-0.8-2.1-1.8L-271.3,418.3z
M-271.3,418.3c1.2,0.8,1.9,2.1,2.2,3.4L-271.3,418.3z"/>
<path class="st0" d="M-240.9,450.3c0-17-11.7-30.8-26.1-30.8s-26.1,13.8-26.1,30.8c0,17,11.7,22.5,26.1,22.5
S-240.9,467.3-240.9,450.3z"/>
<path class="st2" d="M-273.8,447.5c2.6,0,4.7-1.7,4.7-3.7c0-2.1-2.1-3.7-4.7-3.7c-2.6,0-4.7,1.7-4.7,3.7
C-278.5,445.8-276.4,447.5-273.8,447.5z"/>
<path class="st2" d="M-248.5,447.5c2.6,0,4.7-1.7,4.7-3.7c0-2.1-2.1-3.7-4.7-3.7c-2.6,0-4.7,1.7-4.7,3.7
C-253.2,445.8-251.1,447.5-248.5,447.5z"/>
<path class="st0" d="M-261.8,437l-3,3.7c-0.5,0.6-0.4,1.6,0.2,2.1l2.5,2.2c0.6,0.5,1.4,0.5,2,0l2.5-2.2c0.6-0.5,0.7-1.5,0.2-2.1
l-3-3.7C-260.8,436.6-261.5,436.6-261.8,437z"/>
<path d="M-268.9,440.9c-0.6,0-1.2-0.5-1.2-1.2c0-0.6-0.5-1.1-1.1-1.1c-0.6,0-1.1,0.5-1.1,1.1c0,0.6-0.5,1.2-1.2,1.2
c-0.6,0-1.2-0.5-1.2-1.2c0-1.9,1.5-3.4,3.4-3.4c1.9,0,3.4,1.5,3.4,3.4C-267.7,440.3-268.2,440.9-268.9,440.9z"/>
<path d="M-249,440.9c-0.6,0-1.2-0.5-1.2-1.2c0-0.6-0.5-1.1-1.1-1.1c-0.6,0-1.1,0.5-1.1,1.1c0,0.6-0.5,1.2-1.2,1.2
c-0.6,0-1.2-0.5-1.2-1.2c0-1.9,1.5-3.4,3.4-3.4c1.9,0,3.4,1.5,3.4,3.4C-247.8,440.3-248.3,440.9-249,440.9z"/>
<path class="st0" d="M-269.6,477.1c-1.7,0-3.1-1.4-3.1-3.1v-3.4c0-1.7,1.4-3.1,3.1-3.1c1.7,0,3.1,1.4,3.1,3.1v3.4
C-266.6,475.8-267.9,477.1-269.6,477.1z"/>
<path class="st0" d="M-253.8,477.1c1.7,0,3.1-1.4,3.1-3.1v-3.4c0-1.7-1.4-3.1-3.1-3.1c-1.7,0-3.1,1.4-3.1,3.1v3.4
C-256.8,475.8-255.4,477.1-253.8,477.1z"/>
<path class="st0" d="M-295.8,453.6c-4.8-2.1-12.8-9.7-10.9-14.1c1.9-4.4,12.9-3.8,17.7-1.7s7.2,7.3,5.3,11.6
C-285.6,453.8-291,455.7-295.8,453.6z"/>
</svg>
thank you
Did you perhaps move the image between importing and saving? The viewBox X and Y has changed, and the path coordinates have been adjusted to match. Before: viewBox="0 0 82 79" After: viewBox="-308 411 82 79"
well I finally get the answer first I open the svg code in windows and open it in mac same svg but the code was not the same so in my illustrator in mac i put in the styling :internal css and in the decimal : 5 after that I transformed the the path to absolute and that fixed the problem .
Place svg image created by d3.js before a HTML node
I have a base map that is shown in the above image and I want to show data related to each node using the pie/ bar chart alongside each node. I am using d3.js to create the chart but not able to place the chart alongside of each node (as shown in image below)
I have tried to used append and insert method provided by D3.js library but it does not seem to be working. Any leads to achieving the result would be appreciated.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg id="svg" width="1851" height="1806" viewBox="0 0 1851 1806" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="1851" height="1806" fill="#E5E5E5"/>
<circle id="Ellipse 8" cx="558" cy="341" r="39.5" fill="white" stroke="black"/>
<circle id="Ellipse 17" cx="1038" cy="234" r="39.5" fill="white" stroke="black"/>
<circle id="Ellipse 9" cx="300" cy="639" r="39.5" fill="white" stroke="black"/>
<circle id="Ellipse 10" cx="1498" cy="970" r="39.5" fill="white" stroke="black"/>
<circle id="Ellipse 11" cx="1400" cy="1401" r="39.5" fill="white" stroke="black"/>
<circle id="Ellipse 12" cx="399" cy="1322" r="39.5" fill="white" stroke="black"/>
<circle id="Ellipse 16" cx="1279" cy="1562" r="39.5" fill="white" stroke="black"/>
<circle id="Ellipse 15" cx="928" cy="1562" r="39.5" fill="white" stroke="black"/>
<circle id="Ellipse 14" cx="546" cy="1562" r="39.5" fill="white" stroke="black"/>
<circle id="Ellipse 13" cx="229" cy="1562" r="39.5" fill="white" stroke="black"/>
<g id="Group 3">
<circle id="Ellipse 1" cx="783" cy="932" r="224.5" stroke="black"/>
<path id="Polygon 1" d="M898.314 738.715L880.994 738.638L889.721 723.677L898.314 738.715Z" fill="black"/>
<path id="Polygon 6" d="M567.968 932.078L550.788 929.871L561.29 916.097L567.968 932.078Z" fill="black"/>
<path id="Polygon 5" d="M663.973 1124.68L681.293 1124.62L672.68 1139.65L663.973 1124.68Z" fill="black"/>
<path id="Polygon 3" d="M891.549 1129.26L902.904 1116.18L908.553 1132.56L891.549 1129.26Z" fill="black"/>
<path id="Polygon 2" d="M1008 932.3L999.803 917.039L1017.11 917.574L1008 932.3Z" fill="black"/>
</g>
<g id="Group 9">
<line id="Line 1" x1="269" y1="1561.5" x2="506" y2="1561.5" stroke="black"/>
<path id="Polygon 7" d="M269.219 1562L284.404 1553.67L284.026 1570.98L269.219 1562Z" fill="black"/>
</g>
<g id="Group 8">
<line id="Line 2" x1="586" y1="1561.5" x2="888" y2="1561.5" stroke="black"/>
<path id="Polygon 8" d="M890.071 1562.14L875.009 1570.7L875.133 1553.38L890.071 1562.14Z" fill="black"/>
</g>
<g id="Group 12">
<line id="Line 6" x1="228.5" y1="1522" x2="228.5" y2="1322" stroke="black"/>
<path id="Polygon 13" d="M229.274 1312.14L237.727 1327.26L220.408 1327.02L229.274 1312.14Z" fill="black"/>
</g>
<g id="Group 10">
<line id="Line 5" x1="426.435" y1="1348.75" x2="524.435" y2="1521.75" stroke="black"/>
<path id="Polygon 10" d="M528.164 1526.36L513.514 1517.12L528.842 1509.05L528.164 1526.36Z" fill="black"/>
</g>
<g id="Group 11">
<line id="Line 4" x1="372.404" y1="1349.29" x2="246.404" y2="1522.29" stroke="black"/>
<path id="Polygon 12" d="M238.986 1525.13L243.668 1508.45L255.769 1520.84L238.986 1525.13Z" fill="black"/>
</g>
<g id="Group 13">
<line id="Line 7" x1="377.561" y1="1282.24" x2="314.561" y2="1167.24" stroke="black"/>
<path id="Polygon 11" d="M382.164 1290.36L367.514 1281.12L382.842 1273.05L382.164 1290.36Z" fill="black"/>
</g>
<g id="Group 7">
<line id="Line 3" x1="968" y1="1561.5" x2="1239" y2="1561.5" stroke="black"/>
<path id="Polygon 9" d="M1239.07 1562.14L1224.01 1570.7L1224.13 1553.38L1239.07 1562.14Z" fill="black"/>
</g>
<g id="Group 2">
<path id="Polygon 15" d="M567.361 793.935L550.068 794.913L557.867 779.448L567.361 793.935Z" fill="black"/>
<path id="Polygon 14" d="M333.367 661.711L350.447 664.583L339.42 677.94L333.367 661.711Z" fill="black"/>
<line id="Line 8" x1="331.487" y1="663.127" x2="564.487" y2="793.127" stroke="black" stroke-width="2" stroke-dasharray="10 10"/>
</g>
<g id="Group 1">
<path id="Polygon 16" d="M691.209 728.119L678.696 740.095L674.581 723.271L691.209 728.119Z" fill="black"/>
<path id="Vector 1" d="M568 380C568 578 474 686 676 730" stroke="black"/>
</g>
<g id="Group 5">
<path id="Polygon 17" d="M1519.03 1020.27L1503.12 1027.12L1505.15 1009.92L1519.03 1020.27Z" fill="black"/>
<path id="Polygon 18" d="M1419.71 1376.63L1427.08 1360.95L1436.97 1375.17L1419.71 1376.63Z" fill="black"/>
<path id="Vector 2" d="M1506.62 1012.07C1606.95 1178.02 1474.41 1340.84 1425 1370.04" stroke="black" stroke-width="2" stroke-dasharray="10 10"/>
</g>
<g id="Group 15">
<path id="Polygon 19" d="M1118.99 479.678L1123.32 496.449L1106.63 491.811L1118.99 479.678Z" fill="black"/>
<path id="Vector 3" d="M823 697C1063.46 697 1116 489 1116 489" stroke="black"/>
</g>
<g id="Group 17">
<path id="Polygon 20" d="M1058.41 268.41L1073.81 276.34L1059.24 285.711L1058.41 268.41Z" fill="black"/>
<line id="Line 9" x1="1060.86" y1="273.484" x2="1116.86" y2="366.484" stroke="black" stroke-width="2" stroke-dasharray="10 10"/>
</g>
<g id="Group 14">
<path id="Polygon 21" d="M614.597 1401.48L609.124 1417.91L597.629 1404.96L614.597 1401.48Z" fill="black"/>
<path id="Vector 4" d="M478 1437C545.2 1472.2 586 1423 606 1411" stroke="black"/>
</g>
<g id="Group 6">
<path id="Polygon 24" d="M1259.89 1530.5L1243.37 1525.3L1256.13 1513.59L1259.89 1530.5Z" fill="black"/>
<path id="Polygon 23" d="M1146.41 1412.72L1162.9 1418.01L1150.07 1429.65L1146.41 1412.72Z" fill="black"/>
<line id="Line 10" x1="1152.71" y1="1421.3" x2="1260.71" y2="1530.3" stroke="black" stroke-width="2" stroke-dasharray="10 10"/>
</g>
<g id="Group 16">
<path id="Polygon 22" d="M1039.07 1411.14L1024.01 1419.7L1024.13 1402.38L1039.07 1411.14Z" fill="black"/>
<path id="Vector 5" d="M930 1523C930 1523 938 1407 1030 1413" stroke="black" stroke-width="2" stroke-dasharray="10 10"/>
</g>
<g id="Group 4">
<path id="Polygon 26" d="M1004.51 818.604L1020.92 824.148L1007.91 835.587L1004.51 818.604Z" fill="black"/>
<path id="Polygon 25" d="M1463.11 959.919L1449.33 970.414L1447.13 953.233L1463.11 959.919Z" fill="black"/>
<path id="Vector 6" d="M1009.5 824.5C1122.5 917.5 1309.5 984.5 1459.5 961" stroke="black"/>
</g>
<circle id="Ellipse 18" cx="783" cy="703" r="39.5" fill="white" stroke="black"/>
<circle id="Ellipse 23" cx="600" cy="812" r="39.5" fill="white" stroke="black"/>
<circle id="Ellipse 22" cx="597" cy="1033" r="39.5" fill="white" stroke="black"/>
<circle id="Ellipse 21" cx="783" cy="1157" r="39.5" fill="white" stroke="black"/>
<circle id="Ellipse 20" cx="981" cy="1033" r="39.5" fill="white" stroke="black"/>
<circle id="Ellipse 19" cx="963" cy="816" r="39.5" fill="white" stroke="black"/>
</svg>
<script>
var width = 30,
height = 30,
radius = Math.min(width, height) / 2;
var data = [{"letter":"q","presses":1},{"letter":"w","presses":5},{"letter":"e","presses":2}];
console.log(data);
var color = d3.scaleOrdinal().range(["#2C93E8","#838690","#F56C4E"]);
var pie = d3.pie().value(function(d) { return d.presses; })(data);
var arc = d3.arc().outerRadius(radius - 10).innerRadius(0);
var labelArc = d3.arc().outerRadius(radius - 40).innerRadius(radius - 40);
var svg = d3.select("#Ellipse 8")
.insert("svg", "Ellipse 8")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width/2 + "," + height/2 +")"); // Moving the center point. 1/2 the width and 1/2 the height
var g = svg.selectAll("arc")
.data(pie)
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc)
.style("fill", function(d) { return color(d.data.letter);});
</script>
</body>
</html>
This is pretty cool, I guess its a Krebs Cycle?
Gives me an idea for something similar (in terms of how it looks) - 6 port 2 position selector valve for HPLC :)
Anyway, in general you can try something like this:
var parentEl = d3.select("div").node();
parentEl.insertBefore(document.createElement("div"), parentEl.childNodes[0]);
As a simple example:
var g = d3.select('#myG').node();
var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('r', 10);
circle.setAttribute('fill', '#ff0000');
//here we insert the circle before the first element, i.e. the text element
g.insertBefore(circle, g.childNodes[0]);
//if we switch the above line for this then the circle is appended at the end - after the text element
//g.appendChild(circle);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width=500 height=500>
<g id="myG" transform="translate(50, 50)">
<text id="someID">Text example</text>
</g>
</svg>
svg is a bit different to pure HTML because we also have position and translation of each element, and additionally, svg elements are "painted" in the order in which they appear in the DOM, so here we can tell that the circle is before the text element because it is painted first, and so the text element is painted after it and on top of it.
If we switch g.insertBefore(circle, g.childNodes[0]); for g.appendChild(circle); then the circle is painted over the text element
My example is a bit basic because I don't have your code to show you a more applied and real answer.
If you share a minimal reproducible example (https://stackoverflow.com/help/minimal-reproducible-example), in a standalone code snippet here or in codePen etc. then I can give a more applied and real answer.
UPDATE after OP added code
var width = 30,
height = 30,
radius = Math.min(width, height) / 2;
var data = [{"letter":"q","presses":1},{"letter":"w","presses":5},{"letter":"e","presses":2}];
console.log(data);
var color = d3.scaleOrdinal().range(["#2C93E8","#838690","#F56C4E"]);
var pie = d3.pie().value(function(d) { return d.presses; })(data);
var arc = d3.arc().outerRadius(radius - 10).innerRadius(0);
var labelArc = d3.arc().outerRadius(radius - 40).innerRadius(radius - 40);
var circ = document.querySelector("#Group_18 > circle");
var svg = document.querySelector("#svg");
const box = circ.getBoundingClientRect();
var pt = svg.createSVGPoint();
pt.x = (box.left + box.right)/2;
pt.y = box.top
var svgP = pt.matrixTransform(svg.getScreenCTM().inverse());
var circ_g = d3.select("#Group_18")
// .insert("g", "#g")
// .attr("width", width)
// .attr("height", height)
.append("g")
.attr("transform", `translate(${svgP.x}, ${svgP.y - 40}) scale(7)`);
// Moving the center point of the group to add the pie chart to to just above the #Group_18 circle
var g = circ_g.selectAll("arc")
.data(pie)
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc)
.style("fill", function(d) { return color(d.data.letter);});
<body>
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg id="svg" width="555.3" height="541.8" viewBox="0 0 1851 1806" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="1851" height="1806" fill="#E5E5E5"/>
<circle id="Ellipse_8" cx="558" cy="341" r="39.5" fill="white" stroke="black"/>
<circle id="Ellipse_17" cx="1038" cy="234" r="39.5" fill="white" stroke="black"/>
<circle id="Ellipse_9" cx="300" cy="639" r="39.5" fill="white" stroke="black"/>
<circle id="Ellipse_10" cx="1498" cy="970" r="39.5" fill="white" stroke="black"/>
<circle id="Ellipse_11" cx="1400" cy="1401" r="39.5" fill="white" stroke="black"/>
<circle id="Ellipse_12" cx="399" cy="1322" r="39.5" fill="white" stroke="black"/>
<circle id="Ellipse_16" cx="1279" cy="1562" r="39.5" fill="white" stroke="black"/>
<circle id="Ellipse_15" cx="928" cy="1562" r="39.5" fill="white" stroke="black"/>
<circle id="Ellipse_14" cx="546" cy="1562" r="39.5" fill="white" stroke="black"/>
<circle id="Ellipse_13" cx="229" cy="1562" r="39.5" fill="white" stroke="black"/>
<g id="Group_3">
<circle id="Ellipse_1" cx="783" cy="932" r="224.5" stroke="black"/>
<path id="Polygon_1" d="M898.314 738.715L880.994 738.638L889.721 723.677L898.314 738.715Z" fill="black"/>
<path id="Polygon_6" d="M567.968 932.078L550.788 929.871L561.29 916.097L567.968 932.078Z" fill="black"/>
<path id="Polygon_5" d="M663.973 1124.68L681.293 1124.62L672.68 1139.65L663.973 1124.68Z" fill="black"/>
<path id="Polygon_3" d="M891.549 1129.26L902.904 1116.18L908.553 1132.56L891.549 1129.26Z" fill="black"/>
<path id="Polygon_2" d="M1008 932.3L999.803 917.039L1017.11 917.574L1008 932.3Z" fill="black"/>
</g>
<g id="Group_9">
<line id="Line_1" x1="269" y1="1561.5" x2="506" y2="1561.5" stroke="black"/>
<path id="Polygon_7" d="M269.219 1562L284.404 1553.67L284.026 1570.98L269.219 1562Z" fill="black"/>
</g>
<g id="Group_8">
<line id="Line_2" x1="586" y1="1561.5" x2="888" y2="1561.5" stroke="black"/>
<path id="Polygon_8" d="M890.071 1562.14L875.009 1570.7L875.133 1553.38L890.071 1562.14Z" fill="black"/>
</g>
<g id="Group_12">
<line id="Line_6" x1="228.5" y1="1522" x2="228.5" y2="1322" stroke="black"/>
<path id="Polygon_13" d="M229.274 1312.14L237.727 1327.26L220.408 1327.02L229.274 1312.14Z" fill="black"/>
</g>
<g id="Group_10">
<line id="Line_5" x1="426.435" y1="1348.75" x2="524.435" y2="1521.75" stroke="black"/>
<path id="Polygon_10" d="M528.164 1526.36L513.514 1517.12L528.842 1509.05L528.164 1526.36Z" fill="black"/>
</g>
<g id="Group_11">
<line id="Line_4" x1="372.404" y1="1349.29" x2="246.404" y2="1522.29" stroke="black"/>
<path id="Polygon_12" d="M238.986 1525.13L243.668 1508.45L255.769 1520.84L238.986 1525.13Z" fill="black"/>
</g>
<g id="Group_13">
<line id="Line_7" x1="377.561" y1="1282.24" x2="314.561" y2="1167.24" stroke="black"/>
<path id="Polygon_11" d="M382.164 1290.36L367.514 1281.12L382.842 1273.05L382.164 1290.36Z" fill="black"/>
</g>
<g id="Group 7">
<line id="Line_3" x1="968" y1="1561.5" x2="1239" y2="1561.5" stroke="black"/>
<path id="Polygon_9" d="M1239.07 1562.14L1224.01 1570.7L1224.13 1553.38L1239.07 1562.14Z" fill="black"/>
</g>
<g id="Group_2">
<path id="Polygon_15" d="M567.361 793.935L550.068 794.913L557.867 779.448L567.361 793.935Z" fill="black"/>
<path id="Polygon_14" d="M333.367 661.711L350.447 664.583L339.42 677.94L333.367 661.711Z" fill="black"/>
<line id="Line_8" x1="331.487" y1="663.127" x2="564.487" y2="793.127" stroke="black" stroke-width="2" stroke-dasharray="10 10"/>
</g>
<g id="Group_1">
<path id="Polygon_16" d="M691.209 728.119L678.696 740.095L674.581 723.271L691.209 728.119Z" fill="black"/>
<path id="Vector_1" d="M568 380C568 578 474 686 676 730" stroke="black"/>
</g>
<g id="Group_5">
<path id="Polygon_17" d="M1519.03 1020.27L1503.12 1027.12L1505.15 1009.92L1519.03 1020.27Z" fill="black"/>
<path id="Polygon_18" d="M1419.71 1376.63L1427.08 1360.95L1436.97 1375.17L1419.71 1376.63Z" fill="black"/>
<path id="Vector_2" d="M1506.62 1012.07C1606.95 1178.02 1474.41 1340.84 1425 1370.04" stroke="black" stroke-width="2" stroke-dasharray="10 10"/>
</g>
<g id="Group_15">
<path id="Polygon_19" d="M1118.99 479.678L1123.32 496.449L1106.63 491.811L1118.99 479.678Z" fill="black"/>
<path id="Vector_3" d="M823 697C1063.46 697 1116 489 1116 489" stroke="black"/>
</g>
<g id="Group_17">
<path id="Polygon_20" d="M1058.41 268.41L1073.81 276.34L1059.24 285.711L1058.41 268.41Z" fill="black"/>
<line id="Line_9" x1="1060.86" y1="273.484" x2="1116.86" y2="366.484" stroke="black" stroke-width="2" stroke-dasharray="10 10"/>
</g>
<g id="Group_14">
<path id="Polygon_21" d="M614.597 1401.48L609.124 1417.91L597.629 1404.96L614.597 1401.48Z" fill="black"/>
<path id="Vector_4" d="M478 1437C545.2 1472.2 586 1423 606 1411" stroke="black"/>
</g>
<g id="Group_6">
<path id="Polygon_24" d="M1259.89 1530.5L1243.37 1525.3L1256.13 1513.59L1259.89 1530.5Z" fill="black"/>
<path id="Polygon_23" d="M1146.41 1412.72L1162.9 1418.01L1150.07 1429.65L1146.41 1412.72Z" fill="black"/>
<line id="Line_10" x1="1152.71" y1="1421.3" x2="1260.71" y2="1530.3" stroke="black" stroke-width="2" stroke-dasharray="10 10"/>
</g>
<g id="Group_16">
<path id="Polygon_22" d="M1039.07 1411.14L1024.01 1419.7L1024.13 1402.38L1039.07 1411.14Z" fill="black"/>
<path id="Vector_5" d="M930 1523C930 1523 938 1407 1030 1413" stroke="black" stroke-width="2" stroke-dasharray="10 10"/>
</g>
<g id="Group_4">
<path id="Polygon_26" d="M1004.51 818.604L1020.92 824.148L1007.91 835.587L1004.51 818.604Z" fill="black"/>
<path id="Polygon_25" d="M1463.11 959.919L1449.33 970.414L1447.13 953.233L1463.11 959.919Z" fill="black"/>
<path id="Vector_6" d="M1009.5 824.5C1122.5 917.5 1309.5 984.5 1459.5 961" stroke="black"/>
</g>
<g id="Group_18" class="Ellipse_g">
<circle id="Ellipse_18" cx="783" cy="703" r="39.5" fill="white" stroke="black"/>
</g>
<g id="Group_23" class="Ellipse_g">
<circle id="Ellipse_23" cx="600" cy="812" r="39.5" fill="white" stroke="black"/>
</g>
<g id="Group_22" class="Ellipse_g">
<circle id="Ellipse_22" cx="597" cy="1033" r="39.5" fill="white" stroke="black"/>
</g>
<g id="Group_21" class="Ellipse_g">
<circle id="Ellipse_21" cx="783" cy="1157" r="39.5" fill="white" stroke="black"/>
</g>
<g id="Group_20" class="Ellipse_g">
<circle id="Ellipse_20" cx="981" cy="1033" r="39.5" fill="white" stroke="black"/>
</g>
<g id="Group_19" class="Ellipse_g">
<circle id="Ellipse_19" cx="963" cy="816" r="39.5" fill="white" stroke="black"/>
</g>
</svg>
</body>
Few comments, you can't have ids that have spaces, as then the document.querySelector() that d3.js uses under the hood fails. (Example: d3.select('#Group 10') It would look for an element with tagName 10 that is descendent of an element with the id of "Group" - essentially looking for: <g id="Group"><10></10></g> which is not what we want)
So I changed from e.g. <g id="Group 10" .../> to <g id="Group_10" .../> etc.
Also, I wrapped the circles in groups to make it easier to then append into those groups:
<g id="Group_18" class="Ellipse_g">
<circle id="Ellipse_18" cx="783" cy="703" r="39.5" fill="white" stroke="black"/>
</g>
<g id="Group_23" class="Ellipse_g">
<circle id="Ellipse_23" cx="600" cy="812" r="39.5" fill="white" stroke="black"/>
</g>
... etc.
Then I appended your pie chart into this group like so:
var circ = document.querySelector("#Group_18 > circle");
var svg = document.querySelector("#svg");
const box = circ.getBoundingClientRect();
var pt = svg.createSVGPoint();
pt.x = (box.left + box.right)/2;
pt.y = box.top
var svgP = pt.matrixTransform(svg.getScreenCTM().inverse());
var circ_g = d3.select("#Group_18")
.append("g")
.attr("transform", `translate(${svgP.x}, ${svgP.y - 40}) scale(7)`);
// Moving the center point of the group to add the pie chart to to just above the #Group_18 circle
var g = circ_g.selectAll("arc")
.data(pie)
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc)
.style("fill", function(d) { return color(d.data.letter);});
Result is:
Full demo also here: https://codepen.io/Alexander9111/pen/ExjmabY
How to center an SVG element based on another element using js?
I made an SVG face and want to center each pupil in their respective eye.
I tried doing this by getting the center of the eye using getBoundingClientRect(). However when I set the position of the pupil this way it didn't work as expected (it did not center, and changes location based on size of page).
I'm guessing getBoundingClientRect() is related to a global position and the cx, cy attributes are local, but it's not clear to me what the attributes are local to or how I would fix it
Any ideas why this doesn't work and what approach might fix it?
Code
// Center the pupil in the eye. Side param is "left" or "right"
function center_pupil(side) {
let eye = document.querySelector(`#${side}-eye`).getBoundingClientRect()
let pupil = document.querySelector(`#${side}-pupil`)
let pupil_radius = pupil.getAttribute("r")
pupil.setAttribute("cx", eye.left + eye.width / 2 - pupil_radius)
pupil.setAttribute("cy", eye.top + eye.height / 2 - pupil_radius)
}
center_pupil("left")
center_pupil("right")
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 645.72 579.45">
<defs>
<clipPath id="clip-path" transform="translate(-114.91 -242.55)">
<path d="M544,377s9-21,54-25c0,0,114-7,150,25s-43,86-43,86-33.77,18.6-79.06,11.62C615.11,473,587.67,468.87,563,448c-10.53-8.91-25.76-21.79-27-42C535.2,393.05,540.49,382.61,544,377Z"
fill="none" />
</clipPath>
<clipPath id="clip-path-2" transform="translate(-114.91 -242.55)">
<path d="M117.5,397.5a38.69,38.69,0,0,1,8-11c6.89-6.57,14.55-8.78,19-10,32.47-8.93,45-10,45-10,34.68-2.95,53.54-4.56,81-1,33.83,4.38,50.79,6.54,61,21,13.58,19.24,5,45.13,4,48-6.94,20.08-23.19,30.46-35,38a106,106,0,0,1-29.07,12.82,108,108,0,0,1-39.93,3.18c-4.63.72-54.1,7.55-88.32-28.91C120.39,435.31,117.91,406.25,117.5,397.5Z"
fill="none" />
</clipPath>
</defs>
<title>face</title>
<g id="eyes">
<g id="right-eye">
<path d="M540.89,375.37A28.23,28.23,0,0,1,548.4,367a24,24,0,0,1,2.19-1.6c.76-.5,1.5-1,2.26-1.48,1.56-.86,3.07-1.81,4.67-2.55s3.14-1.57,4.76-2.23c.8-.34,1.6-.69,2.39-1.06l2.42-.94c.81-.31,1.61-.65,2.42-1s1.64-.56,2.46-.85l2.46-.81a25.18,25.18,0,0,1,2.49-.73c1.68-.43,3.34-.91,5-1.36s3.38-.71,5.07-1.07l2.54-.55,2.56-.41,5.14-.82c1.81-.26,3.45-.36,5.17-.53l5.12-.43q5.12-.4,10.23-.65a289.41,289.41,0,0,1,41,.71c6.82.65,13.62,1.57,20.39,2.63s13.51,2.37,20.23,3.71,13.41,2.9,20.15,4.54c1.69.38,3.36.86,5,1.36l2.51.73c.83.26,1.65.58,2.48.87l2.47.9c.82.3,1.61.71,2.42,1.05a49,49,0,0,1,4.78,2.33,52.84,52.84,0,0,1,4.63,2.72l2.26,1.48c.75.49,1.44,1.12,2.16,1.68l2.12,1.72c.67.65,1.37,1.27,2,2a30,30,0,0,1,3.57,4.42c.57.78,1,1.65,1.5,2.47s.88,1.73,1.21,2.64a25.41,25.41,0,0,1,1.57,5.59,29.78,29.78,0,0,1-.37,11.31c-4.58,14.09-13,25.18-22.33,35.35a178.89,178.89,0,0,1-14.84,14.31q-3.88,3.39-8,6.53c-2.72,2.11-5.44,4.15-8.32,6.15l-.11.08-.1.05c-2.33,1.23-4.54,2.18-6.86,3.13s-4.62,1.77-7,2.58c-4.68,1.57-9.43,2.87-14.23,4a151.83,151.83,0,0,1-29.28,3.67c-2.46,0-4.93.12-7.39.07l-7.41-.31-7.38-.71c-2.46-.23-4.85-.58-7.3-.93a131.55,131.55,0,0,1-28.88-7.35,114.07,114.07,0,0,1-13.69-6.28c-2.25-1.13-4.38-2.49-6.55-3.78-1.08-.65-2.09-1.41-3.14-2.11s-2.12-1.4-3.1-2.19a143.74,143.74,0,0,1-11.34-9.74,83.58,83.58,0,0,1-10.05-11.51A57.13,57.13,0,0,1,535.46,420a53.51,53.51,0,0,1-2.89-15.38,48.4,48.4,0,0,1,2-15.44,50,50,0,0,1,2.7-7.28c.54-1.17,1.12-2.32,1.76-3.44.31-.56.64-1.11,1-1.65S540.59,375.83,540.89,375.37Zm6.22,3.26c-.75,1.3-1.25,2.21-1.77,3.23s-1,2-1.52,3a56.3,56.3,0,0,0-2.49,6.29,41.51,41.51,0,0,0-2,13.2,34.3,34.3,0,0,0,2.84,12.95,45.72,45.72,0,0,0,7.15,11.32,91.37,91.37,0,0,0,9.77,9.7c3.46,3.07,7.29,6.18,10.83,9a112.56,112.56,0,0,0,23.73,14.54,121.21,121.21,0,0,0,13.15,5,135,135,0,0,0,13.72,3.63c2.31.47,4.7,1,7,1.32s4.69.73,7,1l7.1.56c2.37.13,4.75.12,7.13.18a128.42,128.42,0,0,0,28.29-3.39,135,135,0,0,0,13.69-4c2.23-.81,4.46-1.64,6.63-2.57s4.39-1.91,6.33-3l-.21.13c5.43-3.8,10.71-8.06,15.86-12.34s10.1-8.85,14.78-13.63a103.24,103.24,0,0,0,12.64-15.43,47.41,47.41,0,0,0,4.69-8.65,40.34,40.34,0,0,0,2.28-9.25,33.29,33.29,0,0,0,.35-4.54,22.19,22.19,0,0,0-.46-4.4,20.11,20.11,0,0,0-1.34-4.15c-.25-.67-.64-1.3-1-1.95s-.74-1.27-1.2-1.86a29.21,29.21,0,0,0-6.38-6.48c-.62-.47-1.2-1-1.86-1.44l-2-1.34a46,46,0,0,0-4.12-2.49c-11.39-6-24.05-11.23-37.37-13.24-13.25-2.37-26.77-3-40.22-3.48s-26.92-1-40.43-1.38l-10.13-.24-5.07-.07c-1.66,0-3.42,0-5,0a108.23,108.23,0,0,0-19.78,2.72,24.43,24.43,0,0,0-2.41.65l-2.39.72a43.68,43.68,0,0,0-4.71,1.63c-.77.32-1.55.6-2.3.94s-1.48.75-2.21,1.14-1.47.74-2.17,1.18l-2.06,1.35-1,.68c-.33.24-.64.51-1,.76l-1.9,1.53c-.6.54-1.18,1.11-1.76,1.65a20.72,20.72,0,0,0-1.67,1.71c-.54.58-1.07,1.17-1.54,1.78a21.79,21.79,0,0,0-1.41,1.83l-.66.93-.59.93c-.21.31-.34.62-.52.93-.09.15-.15.29-.22.43Z"
transform="translate(-114.91 -242.55)" />
</g>
<path d="M505,327" transform="translate(-114.91 -242.55)" />
<g id="left-eye">
<path d="M114.91,397a8.77,8.77,0,0,1,.41-1.29c.07-.21.14-.43.22-.65.15-.43.33-.85.52-1.27a23.67,23.67,0,0,1,1.3-2.43,33.63,33.63,0,0,1,3.35-4.38,39.68,39.68,0,0,1,8.37-7.14,45.38,45.38,0,0,1,9.88-4.59c3.45-1.11,6.75-1.8,10-2.64,6.64-1.59,13.29-3.11,20-4.49,3.35-.68,6.71-1.32,10.08-1.9,1.69-.29,3.38-.58,5.08-.84l2.56-.36,1.29-.16.66-.08.33,0,.17,0,.34,0h-.15l10-.79c3.36-.27,6.71-.48,10.05-1s6.66-1.26,10-1.68,6.74-.55,10.13-.72c6.78-.27,13.6-.4,20.41-.06s13.6.93,20.33,1.86,13.33,1.84,20,2.91a156,156,0,0,1,20.08,4.29c.83.26,1.66.55,2.49.83s1.65.56,2.47.91l2.45,1,2.4,1.19a37.88,37.88,0,0,1,8.79,6.29,39.43,39.43,0,0,1,6.43,8.62,19,19,0,0,1,1.21,2.38l1.11,2.43.86,2.52a18.46,18.46,0,0,1,.77,2.53,57.7,57.7,0,0,1,1.39,20.78,77.82,77.82,0,0,1-1.71,10.2c-.41,1.68-.84,3.35-1.38,5s-1.2,3.27-1.82,4.9a80.14,80.14,0,0,1-10.73,18l-.83,1-.87,1c-.6.64-1.17,1.32-1.79,1.94-1.24,1.23-2.49,2.46-3.82,3.59a93.34,93.34,0,0,1-8.31,6.24c-1.42.95-2.85,1.9-4.28,2.81s-2.82,1.81-4.32,2.74q-4.45,2.71-9.14,5a111.57,111.57,0,0,1-19.45,7.27,109.85,109.85,0,0,1-41.18,3l.81,0a96.63,96.63,0,0,1-10.64.84c-3.53.09-7.06,0-10.58-.18a118,118,0,0,1-20.88-3.16A104.42,104.42,0,0,1,170,482a97.9,97.9,0,0,1-18-11.15,94.11,94.11,0,0,1-26.21-32.74,104.55,104.55,0,0,1-7.36-19.73q-1.36-5.09-2.24-10.3c-.28-1.74-.57-3.48-.77-5.23-.12-.87-.2-1.75-.29-2.63l-.07-.66-.07-.86C114.94,398.15,114.92,397.55,114.91,397Zm5.18,1.08a7,7,0,0,1,.08.79l0,1.06c.05.83.09,1.67.17,2.5.11,1.68.31,3.34.51,5,.46,3.33,1.1,6.63,1.88,9.91.39,1.63.86,3.25,1.32,4.86s1,3.21,1.62,4.78c1.17,3.15,2.48,6.25,4,9.27a87.88,87.88,0,0,0,42.45,41.16,99.57,99.57,0,0,0,19,6.34,112.17,112.17,0,0,0,19.92,2.62c3.35.14,6.71.15,10.05,0a89,89,0,0,0,9.9-.94l.38-.06.43,0a105.31,105.31,0,0,0,19.53.1A110.47,110.47,0,0,0,270.55,482a104.55,104.55,0,0,0,18.21-6.92,96.58,96.58,0,0,0,8.52-4.71c1.36-.84,2.79-1.77,4.18-2.67s2.76-1.83,4.12-2.75c2.72-1.85,5.3-3.82,7.85-5.8s5-4,7.4-6.21a51.27,51.27,0,0,0,6.53-7.12,42.86,42.86,0,0,0,4.84-8.38,61.67,61.67,0,0,0,4.57-18.91,52.32,52.32,0,0,0-1.7-19.18,18.18,18.18,0,0,0-.76-2.26l-.84-2.22-1.06-2.12a16.05,16.05,0,0,0-1.13-2.08,35,35,0,0,0-5.82-7.29,34.22,34.22,0,0,0-7.68-5.19l-2.14-1-2.23-.86c-.73-.3-1.5-.55-2.27-.78s-1.53-.49-2.31-.71a160.49,160.49,0,0,0-19.39-3.74c-6.59-.93-13.26-1.73-19.92-2.52a264.5,264.5,0,0,0-39.7-1.74c-3.33.07-6.65.33-10,.27s-6.72-.28-10.08-.29a96.26,96.26,0,0,0-10.05.57l-10,.9h-.16l-2.26.33-2.48.41c-1.65.29-3.3.61-4.95.95-3.3.7-6.59,1.48-9.87,2.28-6.56,1.62-13.08,3.42-19.58,5.32-3.23,1-6.56,1.86-9.53,3a39,39,0,0,0-8.42,4.28,34.43,34.43,0,0,0-6.92,6.22,46.51,46.51,0,0,0-2.8,3.73l-1.37,1.92-.7,1-.37.48A.39.39,0,0,0,120.09,398Z"
transform="translate(-114.91 -242.55)" />
</g>
</g>
<g clip-path="url(#clip-path)">
<circle id="right-pupil" cx="532.09" cy="125.45" r="31" />
</g>
<g clip-path="url(#clip-path-2)">
<circle id="left-pupil" cx="116.59" cy="139.95" r="31" />
</g>
<g id="Layer_4" data-name="Layer 4">
<path d="M505,264s120-29,194-10" transform="translate(-114.91 -242.55)" fill="none" stroke="#000"
stroke-miterlimit="10" stroke-width="10" />
<path d="M154,280s116-27,179,0" transform="translate(-114.91 -242.55)" fill="none" stroke="#000"
stroke-miterlimit="10" stroke-width="10" />
<path d="M390,401c9.15,143.49,6.63,190.63,2,205,0,0-6.53,20.28-2,41a35.35,35.35,0,0,0,4,10s1.3,2.14,8,10"
transform="translate(-114.91 -242.55)" fill="none" stroke="#000" stroke-miterlimit="10"
stroke-width="10" />
<line x1="321.09" y1="415.45" x2="329.09" y2="424.45" fill="none" stroke="#000" stroke-miterlimit="10"
stroke-width="10" />
<path d="M363,774l146-4s-1,47-73,47S363,774,363,774Z" transform="translate(-114.91 -242.55)" fill="none"
stroke="#000" stroke-miterlimit="10" stroke-width="10" />
</g>
</svg>
What I'm currently seeing
Note: pupil location changes based on screen size
Give numbers for svg path elements
I have the following svg file with a defined marker and different paths.
<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="629" version="1.1" xmlns:xlink= "http://www.w3.org/1999/xlink">
<defs>
<marker id="start" viewBox="0 0 42 42" refX="10" refY="20" markerWidth="20" markerHeight="20">
<rect width="20" height="20" fill="#000"></rect>
<text x="10" y="10" font-family="Verdana" font-size="10" fill="#fff" text-anchor="middle" alignment-baseline="central" class="number"></text>
</marker>
</defs>
<path d="M110 543 L98 366" stroke="#E42522" stroke-width="2" stroke-dasharray="20,5" fill="none" marker-end="url(#dot)" marker-start="url(#start)" />
<path d="M172 544 L139 454 L140 420 L144 357 L146 283" stroke="#E42522" stroke-width="2" stroke-dasharray="20,5" fill="none" marker-end="url(#dot)" marker-start="url(#start)"/>
<path d="M151 447 L171 403 L174 326 L164 284 L158 279" stroke="#E42522" stroke-width="2" stroke-dasharray="20,5" fill="none" marker-end="url(#dot)" marker-start="url(#start)"/>
<path d="M234 571 L224 520 L244 465 L256 404 L248 361 L234 307 L236 256" stroke="#E42522" stroke-width="2" stroke-dasharray="20,5" fill="none" marker-end="url(#dot)" marker-start="url(#start)"/>
<path d="M383 578 L376 465 L361 430 L325 378 L325 311 L348 234" stroke="#E42522" stroke-width="2" stroke-dasharray="20,5" fill="none" marker-end="url(#dot)" marker-start="url(#start)"/>
<path d="M376 435 L380 356 L365 331 L358 284 L354 240" stroke="#E42522" stroke-width="2" stroke-dasharray="20,5" fill="none" marker-start="url(#start)"/>
</svg>
For each path element I want a marker displayed with enumerate numbers. So 1,2,3 ......
I want to solve it via javascript but I get the message "Cannot set property 'innerHTML' of undefined".
var number = document.querySelectorAll('.number');
var polygons = document.getElementsByTagName("path");
for (var i = 0; i < polygons.length; i++) {
number[i].innerHTML = i;
console.log(i);
}
Anyone who can help me?
Your problem here is, that you're using definitions to render the number. That has two implications:
Whereever you use this definition, it will print the same content, not different ones (like copying the element)
The definition itself only exists once
The first point means, you can only change all of the numbers to the same value, not to different ones (what, btw., seems to be what you want to do, so you can not do it how you did it now).
The second one is the cause of your error: You try to iterate over multiple numbers, however, your list of nodes (returned from document.querySelectorAll('.number')) only contains one element, as the DOM of your page only has one occurence of this class. So, your loop actually runs out of the array bounds, throwing the error you mentioned.
Actually, I don't know any way of solving your problem without needing to duplicate the markers for each element you want to have a different number for. You could do it in Javascript, something like that:
var number = document.querySelectorAll('.number');
var polygons = document.getElementsByTagName("path");
for (var i = 0; i < polygons.length; i++) {
var node = number[0].parentNode.cloneNode(true);
document.getElementsByTagName('defs')[0].appendChild(node);
node.querySelector('.number').innerHTML = i;
node.id = 'start' + i;
polygons[i].setAttribute("marker-start", 'url(#' + node.id + ')');
}
However, even if that code works, I would probably not use it in production without carefully thinking about the solution. There may be a better one or at least take a look where potentially this code could break.
You can't change the marker. However you can do something like this:
for every path you add a text element:
<text class="number" x="110" y="543" ></text>
the x and y values for the text are taken from the d attribute:in this case d="M110 543 L98 366"
Alternatively you can choose to add those text elements dynamically in a separate group.
var number = document.querySelectorAll('.number');
var polygons = document.getElementsByTagName("path");
for (var i = 0; i < polygons.length; i++) {
number[i].innerHTML = i;
}
svg{border:solid; width:90vh;}
text{font-family:Verdana;font-size:8px;fill:#fff;text-anchor:middle; dominant-baseline:middle}
<svg viewBox="70 230 350 370" >
<defs>
<marker id="start" viewBox="0 0 42 42" refX="10" refY="10" markerWidth="20" markerHeight="20">
<rect width="20" height="20"></rect>
</marker>
</defs>
<path d="M110 543 L98 366" stroke="#E42522" stroke-width="2" stroke-dasharray="20,5" fill="none" marker-end="url(#dot)" marker-start="url(#start)" />
<text class="number" x="110" y="543" ></text>
<path d="M172 544 L139 454 L140 420 L144 357 L146 283" stroke="#E42522" stroke-width="2" stroke-dasharray="20,5" fill="none" marker-end="url(#dot)" marker-start="url(#start)" />
<text class="number" x="172" y="544" ></text>
<path d="M151 447 L171 403 L174 326 L164 284 L158 279" stroke="#E42522" stroke-width="2" stroke-dasharray="20,5" fill="none" marker-end="url(#dot)" marker-start="url(#start)"/>
<text class="number" x="151" y="447" ></text>
<path d="M234 571 L224 520 L244 465 L256 404 L248 361 L234 307 L236 256" stroke="#E42522" stroke-width="2" stroke-dasharray="20,5" fill="none" marker-end="url(#dot)" marker-start="url(#start)"/>
<text class="number" x="234" y="571" ></text>
<path d="M383 578 L376 465 L361 430 L325 378 L325 311 L348 234" stroke="#E42522" stroke-width="2" stroke-dasharray="20,5" fill="none" marker-end="url(#dot)" marker-start="url(#start)" marker-start="url(#start)"/>
<text class="number" x="383" y="578" ></text>
<path d="M376 435 L380 356 L365 331 L358 284 L354 240" stroke="#E42522" stroke-width="2" stroke-dasharray="20,5" fill="none" marker-start="url(#start)"/>
<text class="number" x="376" y="435" ></text>
</svg>
solution is to add a marker tag for each polygon <svg xmlns="http://www.w3.org/2000/svg" width="1024" height="629" version="1.1" xmlns:xlink= "http://www.w3.org/1999/xlink"> <defs> <marker id="start" viewBox="0 0 42 42" refX="10" refY="20" markerWidth="20" markerHeight="20"> <rect width="20" height="20" fill="#000"></rect> <text x="10" y="10" font-family="Verdana" font-size="10" fill="#fff" text-anchor="middle" alignment-baseline="central" class="number">1</text> </marker> <marker id="start2" viewBox="0 0 42 42" refX="10" refY="20" markerWidth="20" markerHeight="20"> <rect width="20" height="20" fill="#000"></rect> <text x="10" y="10" font-family="Verdana" font-size="10" fill="#fff" text-anchor="middle" alignment-baseline="central" class="number">2</text> </marker> <marker id="start3" viewBox="0 0 42 42" refX="10" refY="20" markerWidth="20" markerHeight="20"> <rect width="20" height="20" fill="#000"></rect> <text x="10" y="10" font-family="Verdana" font-size="10" fill="#fff" text-anchor="middle" alignment-baseline="central" class="number">3</text> </marker> </defs> <path d="M110 543 L98 366" stroke="#E42522" stroke-width="2" stroke-dasharray="20,5" fill="none" marker-end="url(#dot)" marker-start="url(#start)" /> <path d="M172 544 L139 454 L140 420 L144 357 L146 283" stroke="#E42522" stroke-width="2" stroke-dasharray="20,5" fill="none" marker-end="url(#dot)" marker-start="url(#start2)"/> <path d="M151 447 L171 403 L174 326 L164 284 L158 279" stroke="#E42522" stroke-width="2" stroke-dasharray="20,5" fill="none" marker-end="url(#dot)" marker-start="url(#start3)"/> </svg> Via javascript , you'll have to add in the defs tag a marker node for each polygon dynamically ( inside the for loop ).