Get bounding box of SVG path - svg
I want exactly what this page do
http://codepen.io/netsi1964/full/vNoemp/
I have the path and need to know it's bounding box as a rect element, it's x,y,width and height
given code
<path d="M147.5 55.8c-5.8-7.2-13.6-14.4-25.5-14.4-8.4 0-15.4 8.2-27 8.2-9 0-13-7.8-23-7.8C51.4 41.8 31 60.4 31 84.5c0 12.8 4.2 32.5 13.6 49.7C51 146.7 59.4 155 69 155c6.7 0 14.7-6.3 24.2-6.3 8.4 0 16.2 5.6 23.8 5.6 18 0 35-23.5 35-39.3 0-.8-.3-1.4-.3-2v-1c-11.8-6.3-18.2-15.7-18.2-29.3 0-11 4.8-20.5 13.6-26.7l.5-.2zm-53-8.8c13.7-4.2 26.3-14.4 26.3-32 0-1.5-.2-3.3-.4-5.3l-.2-.8C106.4 12.6 94 23.4 94 40.3c0 1.6.2 3.6.6 5.8v.8z" style="translate(0px,-212.47488403320312px) scale(1,1)" >
and know the rect properties
With pure JavaScript: give your path an ID and get its bounding box using getBBox().
var myPathBox = document.getElementById("myPath").getBBox();
console.log(myPathBox);
Here is a demo:
var myPathBox = document.getElementById("myPath").getBBox();
console.log(myPathBox);
<svg width="400" height="400">
<path id="myPath" d="M147.5 55.8c-5.8-7.2-13.6-14.4-25.5-14.4-8.4 0-15.4 8.2-27 8.2-9 0-13-7.8-23-7.8C51.4 41.8 31 60.4 31 84.5c0 12.8 4.2 32.5 13.6 49.7C51 146.7 59.4 155 69 155c6.7 0 14.7-6.3 24.2-6.3 8.4 0 16.2 5.6 23.8 5.6 18 0 35-23.5 35-39.3 0-.8-.3-1.4-.3-2v-1c-11.8-6.3-18.2-15.7-18.2-29.3 0-11 4.8-20.5 13.6-26.7l.5-.2zm-53-8.8c13.7-4.2 26.3-14.4 26.3-32 0-1.5-.2-3.3-.4-5.3l-.2-.8C106.4 12.6 94 23.4 94 40.3c0 1.6.2 3.6.6 5.8v.8z" style="translate(0px,-212.47488403320312px) scale(1,1)" >
</svg>
I know this is an old issue, but thought I would put this variant to Furtado's answer for reference here.
An easy way to get the bounding box for the path.
Make sure the path (or any other SVG element has an id on it.
Open the svg file in Chrome (or FF or probably IE).
Inspect the image
Open the console in the inspection tool.
Enter the JS: document.getElementById("myPath").getBBox(); (where
myPath is the id)
The bounding box info will be displayed in the console.
Same method, just no need for custom code.
Related
SVG <path > strokes and detexify database 'strokes'. How to go from on to the other?
I am trying to generate handwritten math text by using mathjax to convert tex to svg and then change svg paths to "strokes" obtained from detexify database github. How can one convert Detexify's strokes: The „strokes“ column contains an array of strokes each of which contains an array of [x,y,t] triples. [[[x1,y1,t1], [x2,y2,t2], …], …]. to the svg format. Example: take latex \sqrt For an svg file: <path id="MJX-15-TEX-SO-221A" d="M263 249Q264 249 315 130T417 -108T470 -228L725 302Q981 837 982 839Q989 850 1001 850Q1008 850 1013 844T1020 832V826L741 243Q645 43 540 -176Q479 -303 469 -324T453 -348Q449 -350 436 -350L424 -349L315 -96Q206 156 205 156L171 130Q138 104 137 104L111 130L263 249Z"></path> Detexify provides us with : [[[134.5,170.125,1390746601343],[134.5,170.125,1390746601362],[134.5,170.125,1390746601369],[134.5,170.125,1390746601379],[135.5,170.125,1390746601548],[136.5,170.125,1390746601575],[143.5,170.125,1390746601599],[144.5,170.125,1390746601605],[147.5,170.125,1390746601623],[149.5,171.125,1390746601636],[150.5,171.125,1390746601656],[151.5,172.125,1390746601672],[152.5,172.125,1390746601682],[153.5,172.125,1390746601694],[153.5,173.125,1390746601708],[154.5,173.125,1390746601716],[155.5,173.125,1390746601734],[155.5,174.125,1390746601749],[155.5,175.125,1390746601925],[156.5,175.125,1390746601933],[156.5,176.125,1390746601940],[156.5,178.125,1390746601955],[156.5,179.125,1390746601964],[156.5,180.125,1390746601972],[156.5,181.125,1390746601981],[156.5,182.125,1390746601990],[156.5,183.125,1390746601998],[156.5,184.125,1390746602013],[156.5,185.125,1390746602022],[156.5,186.125,1390746602029],[156.5,187.125,1390746602040],[156.5,188.125,1390746602044],[156.5,190.125,1390746602056],[156.5,191.125,1390746602061],[156.5,193.125,1390746602076],[156.5,194.125,1390746602092],[156.5,195.125,1390746602108],[156.5,196.125,1390746602116],[156.5,197.125,1390746602132],[156.5,198.125,1390746602150],[156.5,199.125,1390746602156],[156.5,200.125,1390746602172],[156.5,201.125,1390746602196],[156.5,201.125,1390746602206],[156.5,202.125,1390746602212],[156.5,203.125,1390746602222],[156.5,204.125,1390746602237],[156.5,205.125,1390746602245],[156.5,206.125,1390746602255],[156.5,207.125,1390746602260],[156.5,208.125,1390746602272],[156.5,207.125,1390746602397],[156.5,206.125,1390746602405],[157.5,205.125,1390746602412],[157.5,203.125,1390746602422],[158.5,201.125,1390746602428],[158.5,200.125,1390746602439],[158.5,198.125,1390746602444],[158.5,195.125,1390746602455],[158.5,193.125,1390746602460],[159.5,191.125,1390746602472],[159.5,190.125,1390746602476],[160.5,188.125,1390746602490],[160.5,187.125,1390746602495],[160.5,186.125,1390746602506],[160.5,184.125,1390746602509],[160.5,183.125,1390746602524],[160.5,182.125,1390746602532],[160.5,181.125,1390746602540],[160.5,180.125,1390746602556],[160.5,179.125,1390746602564],[161.5,175.125,1390746602582],[161.5,173.125,1390746602591],[162.5,171.125,1390746602599],[162.5,168.125,1390746602606],[163.5,166.125,1390746602614],[163.5,163.125,1390746602622],[164.5,160.125,1390746602629],[164.5,158.125,1390746602640],[164.5,156.125,1390746602643],[165.5,154.125,1390746602656],[165.5,152.125,1390746602659],[165.5,150.125,1390746602673],[165.5,149.125,1390746602677],[165.5,148.125,1390746602691],[165.5,146.125,1390746602694],[165.5,145.125,1390746602708],[165.5,144.125,1390746602724],[165.5,143.125,1390746602732],[165.5,142.125,1390746602780],[165.5,141.125,1390746602805],[165.5,140.125,1390746602828],[164.5,140.125,1390746602836],[164.5,139.125,1390746602861],[164.5,138.125,1390746602940],[165.5,138.125,1390746603293],[166.5,138.125,1390746603306],[168.5,138.125,1390746603313],[171.5,138.125,1390746603323],[174.5,139.125,1390746603326],[177.5,139.125,1390746603340],[180.5,139.125,1390746603344],[183.5,139.125,1390746603356],[187.5,139.125,1390746603359],[194.5,140.125,1390746603373],[197.5,140.125,1390746603382],[200.5,140.125,1390746603390],[203.5,140.125,1390746603398],[205.5,140.125,1390746603407],[207.5,140.125,1390746603416],[208.5,140.125,1390746603423],[210.5,140.125,1390746603440],[211.5,140.125,1390746603446],[212.5,140.125,1390746603461],[212.5,141.125,1390746603469],[213.5,141.125,1390746603477],[214.5,141.125,1390746603493],[215.5,141.125,1390746603517],[216.5,142.125,1390746603525],[217.5,142.125,1390746603541],[218.5,143.125,1390746603549],[219.5,143.125,1390746603557],[220.5,143.125,1390746603573],[221.5,143.125,1390746603582],[222.5,143.125,1390746603590],[223.5,143.125,1390746603598],[225.5,143.125,1390746603613],[226.5,143.125,1390746603629],[227.5,143.125,1390746603639],[228.5,143.125,1390746603645],[229.5,143.125,1390746603661],[229.5,144.125,1390746603677],[230.5,144.125,1390746603690]]]
Plot the x,y as a polyline and ignore the t values. If you really want to use a path then stick an M in the front and similarly add all the x,y values ignoring the t values. When you've got that working you can delay adding each vertex to the polyline/path by the time delta tn+1-tn
Python printing tabular data breaks with Google fonts
I'm using the Tabulate package to print data in table format. The output is sent to a webpage. While using the default font everything is working fine. However upon changing font family (Outfit from Google fonts or cursive e.g), they stop being aligned. Are there any possible solutions? Output with default font: Strength: 16 Dmg: 50 Armor: 3.8 ShadowRes: 3.5% Agility: 34 Spell: 183 FireRes: 5.1% NatureRes: 6.1% Intellect: 61 Critical: 3.4% FrostRes: 6.3% ArcaneRes: 3.8% Output with Google font (looks like this can't really show it because SO font is the default): Strength: 25 Dmg: 45 Armor: 3.1 ShadowRes: 3.2% Agility: 20 Spell: 132 FireRes: 3.3% NatureRes: 3.6% Intellect: 44 Critical: 2.0% FrostRes: 3.6% ArcaneRes: 3.8% Thanks in advance!
you need a monospace font in order to keep the good size of space
How do you enable transparency on an aframe entity that is composed of an SVG/HTML?
I'm having trouble getting an SVG properly rendered into aframe's scene. I went the htmltexture-component route, which has a dependency on the draw-component. The problem is in getting the SVG's background to render as transparent. It simply is not working. Instead I'm given a default white background drawn on the canvas. My SVG was created in Illustrator and is a valid HTML object with no background (as a color or a raster image). <div id="bears"> <svg xmlns="http://www.w3.org/2000/svg" width="518" height="500" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d="M168.958 480.023c-12.18-1.57-24.62-6.847-34.293-14.544-9.103-7.25-11.733-15.34-7.8-23.99 4.594-10.11 22.386-19.1 27.564-13.92 1.71 1.71 2.03 5.14.68 7.27-.63.99-1.03.66-1.51-1.25-1.37-5.43-13.5-2.54-16.44 3.92-2.72 5.95-.57 14.06 4.3 16.28 5.39 2.45 15.09 1.04 23.89-3.49 3.63-1.87 13.35-9.11 19.14-14.25 12.62-11.23 19.38-16.07 28.49-20.42 5.93-2.84 7.37-3.11 16.5-3.11 8.3 0 10.88.39 15.18 2.32 2.84 1.27 5.95 3.17 6.9 4.22 2.05 2.26 3.74 2.42 5.34.5 2.24-2.71 11.83-6.6 17.78-7.23 6.83-.72 17.37.833 22.4 3.3 3.87 1.892 14 8.59 17.72 11.72 1.38 1.155 6.14 5.31 10.59 9.225 14.51 12.8 25.37 18.42 35.56 18.42 4.85 0 9.52-2.153 11.11-5.117 1.75-3.28 1.46-10.15-.56-13.24-1.83-2.793-7.96-6.428-10.258-6.08-.682.102-2.15.243-3.25.312-1.55.097-2 .845-2.03 3.375-.03 3.073-.11 3.144-1.5 1.31-3.32-4.39-.46-9.56 5.28-9.56 7.277 0 18.478 7.596 22.327 15.14 2.34 4.59 2.48 10.893.34 15.403-3.748 7.9-16.18 16.29-31.223 21.08-13.8 4.39-45.63 4.12-65.69-.56-11.47-2.67-21.36-7.31-27.05-12.67-3.21-3.02-6.45-3.65-6.45-1.26 0 .51-2.65 2.63-5.88 4.72-10.35 6.7-24.14 10.68-42.05 12.17-12.99 1.08-26.83 1.08-35.11.02zM374.5 360.566c-7.77-1.094-14.833-3.225-33.893-10.225-2.14-.78-9.34-4.27-16-7.75-14.11-7.37-19.35-9.6-29.607-12.57-12.336-3.57-13.295-3.8-18.5-4.48-8.943-1.16-8.8-.78-6.03-16.03.2-1.1.4-3.03.447-4.3.08-2.21.308-2.27 6.333-1.66 6.334.65 20.588 3.89 24.25 5.51 1.1.49 4.505 1.97 7.567 3.29 3.06 1.32 7.894 4.04 10.74 6.04 2.845 2 5.515 3.64 5.933 3.64.418 0 1.99 1.02 3.49 2.25 4.238 3.49 7.614 5.83 16.27 11.27 7.074 4.45 9.82 5.9 18 9.5 4.746 2.1 11.452 3.81 17.5 4.48 3.575.4 7.85.88 9.5 1.08 3.93.47 14.805-2.08 18.27-4.28 7.812-4.96 12.43-11.71 14.7-21.49 2.514-10.84-.142-21.28-6.64-26.082-5.234-3.87-16.747-1.88-24.316 4.2-1.093.88-.412-.367 1.512-2.76 8.517-10.61 20.494-11.775 30.528-2.965 7.336 6.44 10.342 17.7 7.88 29.525-1.44 6.92-6.636 18.58-9.84 22.07-10.297 11.237-25.51 14.96-48.094 11.78zm-262-2.216c-6.116-.74-13.637-3.196-17-5.55-5.537-3.875-9.688-8.793-13.294-15.754-9.527-18.388-7.015-35.84 6.445-44.778 8.89-5.902 16.55-4.74 25.97 3.944 2.41 2.224 4.38 4.548 4.37 5.165-.01.818-.21.822-.75.014-1.13-1.7-10.33-6.31-13.97-7-15.47-2.9-24.2 15.75-15.88 33.94 8 17.5 25.7 23.2 50.15 16.16 11.14-3.2 19.74-7.56 34.28-17.36 6.22-4.19 12.07-8.07 13-8.61.93-.55 3.04-1.93 4.69-3.08 8.9-6.17 22.62-11.34 35.5-13.39 4.13-.65 8.51-1.35 9.74-1.54 1.23-.19 2.52.11 2.87.68.35.56 1.16 5.43 1.81 10.82l1.17 9.8-5.03.6c-5.65.666-19.46 3.85-27.04 6.237-2.75.864-13.55 5.76-24 10.884-22.3 10.93-26.66 12.68-40 16.04-9.48 2.39-25.33 3.744-33 2.82zM174 237.527c-23.41-4.077-43.362-18.19-56.588-40.027-2.58-4.258-7.44-15.748-8.04-19-1.02-5.543-2.358-14.3-2.364-15.487-.004-.817 1.522.758 3.39 3.5 8.792 12.897 18.184 18.825 30.354 19.16 12.067.332 14.908-1.168 29.013-15.317C181.473 158.612 195.32 148 198.94 148c.912 0 2.224-.563 2.912-1.25.898-.896 5.704-1.244 16.95-1.23 15.634.02 15.722.033 21.698 3.156 9.06 4.735 14.04 8.73 19.248 15.436 4.637 5.97 4.75 6.04 6.237 3.94 2.74-3.865 12.845-14.052 13.94-14.052.592 0 1.078-.338 1.08-.75.012-1.222 6.068-4.334 12.393-6.366 8.55-2.747 24.897-2.706 33.558.084 3.55 1.144 6.7 2.407 7 2.806.3.4 2.138 1.534 4.086 2.522 5.085 2.577 11.184 7.778 21.458 18.298 11.824 12.107 15.94 14.606 25.015 15.19 9.73.623 17.925-2.324 26.59-9.563 1.888-1.57 7.062-8.87 9.733-13.72 1.95-3.54 1.386 5.22-.938 14.56-1.925 7.74-6.9 19.74-9.38 22.63-.56.66-2.145 2.88-3.52 4.95-3.75 5.63-14.84 16.58-20.5 20.25-12.477 8.08-26.436 12.77-40.5 13.6-8.476.5-23.706-.84-27.5-2.43-1.1-.46-4.025-1.38-6.5-2.04-2.475-.66-6.876-2.29-9.78-3.61-2.903-1.32-5.483-2.4-5.732-2.4-1.02 0-13.642-8.13-19.31-12.44-3.345-2.54-7.576-6.37-9.402-8.5l-3.32-3.88-3.18 3.79C257.95 210.93 243.87 222 242.16 222c-.545 0-1.14.395-1.325.878-.183.483-3.933 2.68-8.333 4.882-19.038 9.526-39.892 13.008-58.5 9.767zm-1.594-159.52c-8.636-.944-14.453-3.438-20.44-8.763-11.826-10.52-14.99-29.243-7.322-43.33 3.49-6.416 8.05-10.408 16.31-14.276 5.78-2.71 7.6-3.07 15.546-3.075 7.427-.006 9.75.388 13.29 2.255 5.43 2.866 8.203 7.32 8.203 13.182 0 7.234-4.917 13.106-12.993 15.52-2.437.727-2.455.695-.72-1.25.98-1.097 2.212-3.5 2.74-5.34.846-2.948.645-3.67-1.696-6.113-8.034-8.386-20.356-4.395-23.882 7.736-2.124 7.304-1.174 11.553 3.535 15.807 4.824 4.358 9.81 5.97 16.88 5.453 8.677-.634 14.04-3.842 18.92-11.315 9.25-14.173 24.976-20.235 45.804-17.66 4.91.608 10.27 1.42 11.92 1.806 3.86.903 7.14.91 11.5.026 24.76-5.018 44.31-1.46 53.48 9.733 1.94 2.367 3.53 4.804 3.53 5.417 0 2.032 7.18 8.325 11.71 10.267 9 3.856 21.6 1.406 26.5-5.15 8.07-10.805-3.26-29.497-15.79-26.04-7.94 2.195-10.78 8.818-6.24 14.59l2.17 2.754-2.42-.72c-3.86-1.15-8.41-4.57-10.88-8.17-1.85-2.71-2.19-4.27-1.81-8.28.98-10.11 7.12-14.39 20.78-14.46 15.78-.08 27.03 6.4 33.66 19.41 2.46 4.83 2.8 6.61 2.8 14.5 0 11.84-3.12 19.13-11.48 26.87-7.8 7.22-14 9.01-30.97 8.92-25.37-.13-75.41-11.67-79.54-18.34-.44-.72-1.4-.42-2.81.88-6.42 5.89-50.5 16.3-74.15 17.51-4.95.26-12.19.11-16.09-.31z"/> </svg> </div> The SVG is held within <a-assets></a-assets> along with other assets. The entity's code looks like this: <a-entity geometry="primitive: plane" position="10 4 -4" scale="4 4 0" draw="width: 512; height: 512;" htmltexture="asset: #bears"> </a-entity> The rendered plane holding the SVG texture ends up having a white background. I tried changing the material transparency property, but that didn't work. I also tried changing the draw background property, seeing as how aframe-htmltexture-component has a dependency on aframe-draw-component which creates a canvas element to draw to, but again no luck. Anyone know a fix for this, or have a better way at rendering HTML (SVG) as an aframe entity?
Try material.opacity: <a-entity geometry="primitive: plane" position="10 4 -4" scale="4 4 0" draw="width: 512; height: 512;" htmltexture="asset: #bears" material="opacity: 0.0; transparent: true"> </a-entity> Edit: Transparent must be set to true too.
Did you try transparent="true" ? I had similar issues with importing PNGs with transparency, and then discovered setting transparent="true" fixed it. <a-plane position="0 0.01 0" rotation="-90 0 0" height="7" width="7" src ="#metatron-gates-platform" transparent ="true"> </a-plane>
I ran into this as well. Try changing the order of the svg entities. Because it is a 3d environment it renders farthest from the camera first, so place those entities first in your code.
Node.js Child Process getting "Stuck"
I'm building a web crawler in Node.js using the npm crawler package. My program right now creates 5 child processes which each instantiate a new Crawler, which crawls a list of URLS which the parent provides. When it runs for about 15-20 minutes, it slows down to a halt and the processes' STATE column from the output of the top command reads stuck for all the children. [see below] I have little knowledge of the top command, and the columns provided, but I want to know is there a way to find out what is causing the processes to slow down by looking at the output of top? I realize that it is probably my code that has a bug in it, but I want to know where I should start debugging: memory leak, caching issue, not enough children, too many children, etc. Below is the entire output of top PID COMMAND %CPU TIME #TH #WQ #PORT #MREG MEM RPRVT PURG CMPRS VPRVT VSIZE PGRP PPID STATE UID FAULTS COW MSGSENT MSGRECV SYSBSD SYSMACH 11615 node 2.0 17:16.43 8 0 42 2519 94M- 94M- 0B 1347M+ 1538M 4150M 11610 11610 stuck 541697072 14789409+ 218 168 21 6481040 63691 11614 node 2.0 16:57.66 8 0 42 2448 47M- 47M- 0B 1360M+ 1498M- 4123M 11610 11610 stuck 541697072 14956093+ 217 151 21 5707766 64937 11613 node 4.4 17:17.37 8 0 44 2415 100M+ 100M+ 0B 1292M- 1485M 4114M 11610 11610 sleeping 541697072 14896418+ 215 181 22 6881669+ 66098+ 11612 node 10.3 17:37.81 8 0 42 2478 24M+ 24M+ 0B 1400M- 1512M 4129M 11610 11610 stuck 541697072 14386703+ 215 171 21 7083645+ 65551 11611 node 2.0 17:09.52 8 0 42 2424 68M- 68M- 0B 1321M+ 1483M 4111M 11610 11610 sleeping 541697072 14504735+ 220 168 21 6355162 63701 11610 node 0.0 00:04.63 8 0 42 208 4096B 0B 0B 126M 227M 3107M 11610 11446 sleeping 541697072 45184 410 52 21 36376 6939 Here are the dependencies: ├── colors#0.6.2 ├── crawler#0.2.6 ├── log-symbols#1.0.0 ├── robots#0.9.4 └── sitemapper#0.0.1 Sitemapper is one I wrote myself which could be a source for bugs.
Correlation analysis between stock prices
Let us consider following stock prices taken from yahoo.finance.com: Date Open High Low Close Volume Adj Close 3/4/2013 23.15 23.84 23.03 23.67 30908300 23.3 2/25/2013 23.5 23.53 22.81 23.19 40710800 22.83 2/19/2013 23.42 23.75 23.12 23.39 38743400 23.03 2/11/2013 22.49 23.55 22.35 23.29 46448500 22.74 2/4/2013 22.41 22.62 22.27 22.5 34498100 21.97 1/28/2013 22.44 22.64 22.18 22.62 39634900 22.09 1/22/2013 22.18 22.31 21.75 22.29 47826300 21.77 1/14/2013 21.18 22.19 21.01 22.04 54826000 21.52 1/7/2013 21.16 21.24 20.68 21.13 35304100 20.63 12/31/2012 20.29 21.54 20.26 21.2 45796500 20.7 12/24/2012 20.79 20.96 20.42 20.44 28597100 19.96 12/17/2012 21.69 21.95 20.56 20.88 70719700 20.39 12/10/2012 21.43 21.95 21.36 21.62 39455500 20.92 12/3/2012 21.18 21.48 20.71 21.46 35913000 20.77 11/26/2012 20.88 21.36 20.5 21.13 36203100 20.45 11/19/2012 20.41 21.04 20.37 21.04 35401500 20.36 11/12/2012 21.04 21.14 19.87 20.15 45095400 19.5 11/5/2012 21.2 21.78 20.7 21 37812800 20.32 11/2/2012 21.53 21.68 21.26 21.31 47475200 20.62 And i want to do correlation matrix between for example Volume and Low Close variable. I used correlation function from data analysis toolbox from excel, but I got only one side matrix, like this: Close Volume Close 1 Volume -0.117267345 1 It does not show me correlation coefficients up side of main diagonal, why? Maybe it is symmetric and because of this?
The correlation matrix is necessarily symmetric, so the above the diagonal element in your case is -0.117257345. If you check the documentation on the correl function, and look at the defining equation, you can see that it is symmetric with respect to exchanging X<->Y