Develop Reference

how to create d3 radial with dynamic radios

I created a radial with two tiers of options. I did in a way that isn't really dynamic and isn't really responsive to screen size. I now need it to be both of those things. Here is what it looks like when on the screen size I designed it for.
I created a working demo on sandbox that has the dimensions set how I need to use it on. This is what it looks like.
Here is link WORKING DEMO
any help is appreciated. Also keep in mind the outer tiers can have less or more options. it would be great if the blue toggle button would always align at the bottom of the radial like under the En of Energy Loss

I would consider using an SVG ViewBox in order to maintain consistency. What this basically does is create a consistent scalable SVG, mapping the size and coordinates of its container into a consistent range inside the SVG.
For example:
<div height="400px" width="400px">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100%" height="100%" stroke="red" fill-opacity="0"/>
<circle r="4" cx="10" cy="10"/>
</svg>
</div>
So it basicalley creates a mapping from the 400x400 dimensions of the div, into the 100x100 of the svg, so the circle positioned at (10, 10) inside the svg will actually be in coordinates (40, 40) of the div

Modify SVG files to include width and height of graphic in SVG tag

I've a lot of SVG files (several graphics like, dogs, trees, birds, buildings etc.), and they are from different sources from web. I need to define height and width of these SVGs.
Example File:
<svg id="svg1" viewBox="0 0 36 33" xmlns="http://www.w3.org/2000/svg">
<path d="m18 0.0938-17.719 16.281h5.5625v15.531h24.312v-15.531h5.5625l-17.719-16.281z"/>
</svg>
I get the width and height of this:
var svg1 = document.getElementById('svg1');
console.log('client', svg1.clientWidth + 'x' + svg1.clientHeight);
And then modified the file with the results:
<svg width="630" height="577" viewBox="0 0 36 33" xmlns="http://www.w3.org/2000/svg">
<path d="m18 0.0938-17.719 16.281h5.5625v15.531h24.312v-15.531h5.5625l-17.719-16.281z"/>
</svg>
I am experienced in javascript and c#, but I don't know a way to achieve this.
P.S: The reason I need this: My wordpress custom product designer plugin uses SVG files to design custom products, but those SVG files must have width and height for my plugin to work properly.

if you are using SVG from material-ui, wrap it inside an IconButton (and define the height and width here). The svg takes the dimensions of the parent.

how to scale the drawing according to viewbox or height width of svg tag

Hi i am facing a problem i have a svg.When i try to change the height and width and viewbox's height and width the drawing inside the svg will not get fit in to the box
This is my mysvg i am giving the short form
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="500pt" height="500pt" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(528,270)" >
<g id="states" fill="green" width="500pt" height="500pt" >
<a id="s01">
<path d="M158.95067408594068,46.88327098850149L185.03303599629845,44.0148159910488L189.74121811302572,59.50889743727097L196.59587401503094,82.27898337817625L199.0518321008348,87.17077847298319L201.13017099189912,89.85649424407167L200.707578706067,91.7588142001174L202.6261541288344,92.6205139503571L200.33524838576966,95.29216920133321L200.7363444144292,97.59217497211156L199.80999341478454,100.8918397716738L202.09021078470892,106.20782432993735L201.64399529140977,111.17790897235179L204.03767592952832,115.96122130827978L196.3574723373462,117.09985438789514L163.47293491613115,121.08122011183377L163.22294648718562,123.55296427740802L167.13791879442175,126.6835133291724L166.871741037497,129.76735843938286L168.2485001228969,131.1400084527912L166.21795234496457,134.1137855808483L164.12121282499038,134.9547500732084L159.81791064191435,132.36796011584426L158.90469329765804,127.88713803963412L157.64560372254968,127.51168600895127L156.5390262005875,131.08669596034315L156.36678872306632,134.46030822963786L152.20800610122825,133.97284127048096L148.16895577705603,105.98121856614907L148.12136132417422,70.56398790998259L148.15893441899317,50.102043132249676L146.40831263672231,48.33943105796875Z" stroke="#FFFFFF" stroke-dasharray="1, 0" stroke-width="1.5"></path>
<text x="162.66165594858754" y="86.92631614090374" style="">AL</text>
<title></title>
</a>
</g>
</g>
</svg>
this is what happen when i change the width and height or viewbox or both
\
now width height get reduced but drawing remains the same

Assume the initial height and width 1000px.
<svg height="1000" width="1000" viewBox="0 0 1000 1000">
If you want to resize svg and all elements in it, then don't change viewBox value. For 500px SVG:
<svg height="500" width="500" viewBox="0 0 1000 1000">
Example
How to Zoom and Pan with SVG

The solution is the same as the answer I gave you yesterday.
Width height of the svg is not changing
Try following these steps:
(1) Set svg width and height to 500, and add preserveAspectRatio="none" to your svg.
<svg width="500" height="500" preserveAspectRatio="none" ...>
This will probably stretch your map strangely, but don't worry, it is just a temporary change that makes the next step easier.
(2) Now adjust the viewBox until all the map is visible. Once you find the right values, leave the viewBox alone. You shouldn't need to change it further.
(3) Remove the preserveAspectRatio="none". The stretch effect will disappear.
(4) Now you can adjust the svg width and height from 500x500 to whatever size you like. The entire map should stay visible no matter how you change the width and height.

Convert svg box to a css3 rotated div

I used a vector program to draw and rotate a box shape and the exported it as a svg file.
My goal is to read this svg data with javascript and use it to create a matching div. The div should be absolutely positioned and rotated with css3 to match the shape, position and angle of the svg box.
This might be quite a challenge (at least for me) so I'm not sure what would be the best way to approach the task. The svg code looks like this:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="800px" height="600px" viewBox="0 0 800 600" enable-background="new 0 0 800 600" xml:space="preserve">
<rect x="172.5" y="154.5" transform="matrix(0.8779 -0.4788 0.4788 0.8779 -68.2383 143.3385)" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="149" height="102"/>
</svg>
I imagine the rect x and y values can be used directly to define the width and height of the div. But how to determine the correct rotation value for css..

SVG transforms are equivalent to -x-transforms using matrix(). Basically you want to take the SVG matrix and add commas.
So your SVG transform up there is equivalent to:
-webkit-transform: matrix(0.8779 ,-0.4788 ,0.4788 ,0.8779, -68.2383,143.3385);
http://jsfiddle.net/8P76p/
(Incidentally, that's not a pure rotation, it's a rotation + translate.)

Trying to draw SVG to canvas, but it's being cut short

http://jsfiddle.net/NV6Cr/1/
If you click "Create Canvas", it'll draw the SVG text at the bottom of the page onto the canvas. The only problem is that it's only taking the top left portion of the text. Any idea what's going on?

Change the SVG so its size matches the canvas and it works on Firefox for me e.g.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="layer" id="layer_text" width="778" height="544">