node-red-contrib-ui-svg icon indicating copy to clipboard operation
node-red-contrib-ui-svg copied to clipboard

Published 20 hours ago • verified publisher icon bartbutenaers

Question about svg node not respecing dimensions / proportions

Open vongomben opened this issue 1 year ago • 4 comments

The Svg node is the most interesting one I've been playing so far for creating custom visualizations (which is super requested and cool). In this case, I'm trying to visualize the weight of people using a smart sole.

I created the svg in inkscape, and successfully uploaded in the svg dashboard node. I'm uploading you just the dashabord nodes, and repeat here the code.

image

The problem is, that I'm totally unable to show the sole as central and zoomed in in the dashabord group. If I put proportioned dimensions, the sole is rendered not correctly (super tiny).

Any help?

<svg svg x="0" y="0" height="800" viewBox="0 0 800 400" width="2000" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Add here your SVG shapes (circles, rectangles, ...) -->
<!-- Or remove everything, if you want to paste an entire drawing (<svg...>...</svg>).-->


  <g
     inkscape:label="sole"
     inkscape:groupmode="layer"
     id="layer1"
     style="display:inline">
    <path
       style="fill:#0c0d0e;stroke:none;stroke-width:0.0504726"
       d="m 190.22034,30.969275 c -1.40668,-0.583807 -2.71406,-1.438577 -4.12556,-2.040308 -4.16489,-1.775369 -8.63521,-2.839018 -13.15766,-3.052247 -7.95545,-0.375281 -15.60455,2.113607 -23.31639,3.641136 -7.26381,1.438948 -14.75386,1.815142 -22.14339,1.609437 C 118.3084,30.872274 109.19537,29.472602 100.24266,27.523706 92.237979,25.781093 84.289771,23.713527 76.21598,22.30058 64.803301,20.303228 53.004716,19.421372 41.506743,21.245956 34.544772,22.351088 27.70327,24.71994 21.721231,28.484277 c -1.270759,0.799695 -2.539837,1.602681 -3.745467,2.500011 -0.481497,0.358432 -1.126397,0.705868 -1.512284,1.166709 -1.103422,1.317674 -1.807149,3.189574 -2.438989,4.769601 -0.494176,1.235821 -0.794092,2.533083 -1.017979,3.841605 -1.811739,10.592659 7.091301,19.192958 15.062221,24.553782 1.511814,1.016803 3.0646,2.047932 4.666027,2.921223 10.685659,5.82493 22.33553,10.181297 34.344077,12.387287 10.387677,1.90835 20.897136,2.2097 31.433586,2.18568 12.255457,-0.0276 24.505097,-0.67801 36.737867,-1.34869 l 22.57435,-1.24547 c 8.26633,-0.45288 16.5491,-1.09373 24.61405,-3.062256 6.82154,-1.665218 14.09776,-4.825606 18.1485,-10.850426 4.61132,-6.858455 4.67831,-16.361374 1.14626,-23.679486 -1.5144,-3.137925 -3.73976,-5.863094 -6.39289,-8.106783 -1.23825,-1.047172 -2.55013,-2.030397 -3.95455,-2.841242 -0.38597,-0.222834 -0.7571,-0.536989 -1.16567,-0.706547 m -1.54664,-0.551367 c 1.40581,0.604534 2.7611,1.568108 4.02406,2.418012 2.60108,1.750391 4.9726,3.943788 6.79118,6.508434 3.97891,5.611384 5.38597,12.942745 3.8719,19.64339 -0.54564,2.412813 -1.45296,4.863555 -2.84078,6.92715 -4.2258,6.284624 -11.52198,9.355392 -18.6379,11.092395 -8.274,2.019706 -16.81401,2.556966 -25.28999,3.021686 l -21.84793,1.19863 c -11.19893,0.61424 -22.40108,1.16541 -33.61819,1.29533 -9.350292,0.10855 -18.761664,0.0443 -28.044869,-1.19083 -8.483912,-1.1286 -16.793212,-3.32782 -24.819916,-6.271892 -4.57743,-1.67882 -9.131328,-3.618555 -13.408112,-5.949632 -1.515891,-0.826826 -3.111352,-1.664621 -4.543876,-2.628077 -7.09869,-4.773317 -14.535875,-10.369753 -16.763266,-19.114505 -0.305062,-1.197213 -0.432899,-2.422643 -0.474009,-3.653951 -0.05243,-1.564228 0.177709,-3.119748 0.554305,-4.633839 0.448227,-1.802019 1.180184,-3.587679 2.107619,-5.194042 0.307377,-0.532394 0.577596,-1.191154 1.015337,-1.628465 0.738714,-0.737954 1.725879,-1.292831 2.574043,-1.894155 2.703893,-1.917099 5.651649,-3.553532 8.681313,-4.895569 4.32692,-1.916611 8.920679,-3.219335 13.589653,-3.969842 12.607279,-2.02687 25.499757,-0.69413 37.953518,1.693958 8.759041,1.679678 17.365054,4.093803 26.13778,5.705365 8.2168,1.509461 16.4586,2.423484 24.81547,2.544614 6.86856,0.09962 13.86684,-0.517021 20.58807,-1.943905 7.25914,-1.540896 14.48698,-3.718051 21.99086,-3.364132 3.78485,0.178502 7.52483,1.012128 11.0771,2.315224 1.55155,0.56912 3.00532,1.318714 4.51663,1.968648"
       id="path980"
       sodipodi:nodetypes="cccccccccccsccccccccccssccscccscccccccccssccccccccscc" />
  </g>
  <g
     inkscape:groupmode="layer"
     id="layer2"
     inkscape:label="points"
     style="display:inline">
    <circle
       style="fill:none;stroke:#000000;stroke-width:0.381525;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000"
       id="path1168"
       cx="29.362072"
       cy="43.384052"
       r="8.3297596" />
    <circle
       style="fill:none;stroke:#000000;stroke-width:0.381525;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000"
       id="circle1294"
       cx="52.16975"
       cy="33.170181"
       r="8.3297596" />
    <circle
       style="fill:none;stroke:#000000;stroke-width:0.381525;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000"
       id="circle1296"
       cx="56.830452"
       cy="52.308788"
       r="8.3297596" />
    <circle
       style="fill:none;stroke:#000000;stroke-width:0.381525;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000"
       id="circle1298"
       cx="73.688293"
       cy="70.455765"
       r="8.3297596" />
    <circle
       style="fill:none;stroke:#000000;stroke-width:0.381525;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000"
       id="circle1300"
       cx="98.975067"
       cy="73.083611"
       r="8.3297596" />
    <circle
       style="fill:none;stroke:#000000;stroke-width:0.381525;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000"
       id="circle1302"
       cx="163.32742"
       cy="41.857029"
       r="8.3297596" />
    <circle
       style="fill:none;stroke:#000000;stroke-width:0.381525;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000"
       id="circle1304"
       cx="170.76471"
       cy="63.970554"
       r="8.3297596" />
    <circle
       style="fill:none;stroke:#000000;stroke-width:0.381525;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000"
       id="circle1306"
       cx="183.90393"
       cy="51.277584"
       r="8.3297596" />
  </g>
  <g
     inkscape:groupmode="layer"
     id="g13559"
     inkscape:label="points-fill">
    <circle
       style="fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:0.381525;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000"
       id="circle13543"
       cx="29.362072"
       cy="43.384052"
       r="8.3297596" />
    <circle
       style="fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:0.381525;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000"
       id="circle13545"
       cx="52.16975"
       cy="33.170181"
       r="8.3297596" />
    <circle
       style="fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:0.381525;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000"
       id="circle13547"
       cx="56.830452"
       cy="52.308788"
       r="8.3297596" />
    <circle
       style="fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:0.381525;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000"
       id="circle13549"
       cx="73.688293"
       cy="70.455765"
       r="8.3297596" />
    <circle
       style="fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:0.381525;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000"
       id="circle13551"
       cx="98.975067"
       cy="73.083611"
       r="8.3297596" />
    <circle
       style="fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:0.381525;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000"
       id="circle13553"
       cx="163.32742"
       cy="41.857029"
       r="8.3297596" />
    <circle
       style="fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:0.381525;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000"
       id="circle13555"
       cx="170.76471"
       cy="63.970554"
       r="8.3297596" />
    <circle
       style="fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:0.381525;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000"
       id="circle13557"
       cx="183.90393"
       cy="51.277584"
       r="8.3297596" />
  </g>
  <g
     inkscape:groupmode="layer"
     id="layer3"
     inkscape:label="num"
     style="display:inline">
    <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:6.72968px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.0504726"
       x="182.88426"
       y="53.691425"
       id="text1597"><tspan
         sodipodi:role="line"
         id="tspan1595"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.72968px;font-family:'Roboto Slab';-inkscape-font-specification:'Roboto Slab';stroke-width:0.0504726"
         x="182.88426"
         y="53.691425">1</tspan></text>
    <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:6.72968px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.0504726"
       x="169.14087"
       y="66.383041"
       id="text2949"><tspan
         sodipodi:role="line"
         id="tspan2947"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.72968px;font-family:'Roboto Slab';-inkscape-font-specification:'Roboto Slab';stroke-width:0.0504726"
         x="169.14087"
         y="66.383041">2</tspan></text>
    <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:6.72968px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.0504726"
       x="161.42773"
       y="44.19025"
       id="text6967"><tspan
         sodipodi:role="line"
         id="tspan6965"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.72968px;font-family:'Roboto Slab';-inkscape-font-specification:'Roboto Slab';stroke-width:0.0504726"
         x="161.42773"
         y="44.19025">3</tspan></text>
    <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:6.72968px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.0504726"
       x="96.971275"
       y="75.426849"
       id="text9379"><tspan
         sodipodi:role="line"
         id="tspan9377"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.72968px;font-family:'Roboto Slab';-inkscape-font-specification:'Roboto Slab';stroke-width:0.0504726"
         x="96.971275"
         y="75.426849">4</tspan></text>
    <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:6.72968px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.0504726"
       x="71.783661"
       y="72.650269"
       id="text10493"><tspan
         sodipodi:role="line"
         id="tspan10491"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.72968px;font-family:'Roboto Slab';-inkscape-font-specification:'Roboto Slab';stroke-width:0.0504726"
         x="71.783661"
         y="72.650269">5</tspan></text>
    <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:6.72968px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.0504726"
       x="54.727486"
       y="54.602451"
       id="text11115"><tspan
         sodipodi:role="line"
         id="tspan11113"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.72968px;font-family:'Roboto Slab';-inkscape-font-specification:'Roboto Slab';stroke-width:0.0504726"
         x="54.727486"
         y="54.602451">6</tspan></text>
    <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:6.72968px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.0504726"
       x="50.165955"
       y="35.364681"
       id="text12757"><tspan
         sodipodi:role="line"
         id="tspan12755"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.72968px;font-family:'Roboto Slab';-inkscape-font-specification:'Roboto Slab';stroke-width:0.0504726"
         x="50.165955"
         y="35.364681">7</tspan></text>
    <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:6.72968px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.0504726"
       x="27.556604"
       y="45.38023"
       id="text13331"><tspan
         sodipodi:role="line"
         id="tspan13329"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.72968px;font-family:'Roboto Slab';-inkscape-font-specification:'Roboto Slab';stroke-width:0.0504726"
         x="27.556604"
         y="45.38023">8</tspan></text>
  </g>
</svg>

Copy of svg here

vongomben avatar Jun 27 '23 08:06 vongomben