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.)
Related
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
I'm working on an svg floorplan layout that users should be able to zoom in and out of.
When I first coded it, the zooming feature worked, but the svg wasn't responsive to the container size. I added the viewbox property to make it responsive, but this interferes with the zoom feature - it zooms in even if you try to zoom out, and the zooming doesn't work the way it did before I added viewbox.
Here are 2 codepens demonstrating the issue:
Codepen 1
without viewbox - svg zooms correctly, but is not responsive to container size
https://codepen.io/nicole-dsouza/pen/WJVywK
the only difference is in the opening svg tag:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="100%" height="100%">
Codepen 2
with viewbox - svg is responsive, but doesn't zoom correctly
https://codepen.io/nicole-dsouza/pen/QrexyV
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="100%" height="100%" viewBox="0 0 873 699">
Can anyone help me figure out what's causing the issue? I need the svg to be responsive and zoomable at the same time.
Appreciate any help.
Remove the width and height attributes, and use a viewbox instead. And wrap the svg in a responsive object wrapper. See https://codepen.io/vcurd/pen/bKEdQe
<div class="svg-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 890 150">
How can I make SVG viewBox user coordinate system the same as the viewport coordinates system provided by SVG itself (height="100%" and width="100%")?
I need this special case for a project I'm doing, SVG element should be responsive, but still we need to keep height and width 100% on the SVG itself.
So, I need something like this:
<svg height="100%" width="100%" viewBox="0, 0, 100%, 100%">
<circle cx="25" cy="25" r="20" stroke="black" strokeWidth="1" fill="black" />
</svg>
.. but the viewBox attribute doesn't accept percentages.
%/px is not allowed in the viewBox, those are the maximum coordinates.
By default the SVG content is contained to the SVG size.
If you want the content to stretch to 100%, disable the aspect ratio using preserveAspectRatio="none".
You can also use preserveAspectRatio="slice" to make the content cover the SVG (like background-size: cover).
<svg height="100%" width="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
There are some good articles about this: https://css-tricks.com/scale-svg/ and https://alligator.io/svg/preserve-aspect-ratio/
I have some javascript code that dynamically creates SVG polygons at various locations. Currently if a polygon is created outside of the range of the SVG element's width and height, then it isn't displayed. I would like the polygons to scale down so that each polygon is visible, within the specified area.
As an example this only displays one triangle:
<svg width="100" height="100">
<polygon points="0,0 0,100 100,50 " fill="blue"></polygon>
<polygon points="100,0 100,100 200,50 " fill="blue"></polygon>
</svg>
but I would like it to display something closer to what this displays (two triangles scaled to fit inside a 100 by 100 box,) without having to change the points myself:
<svg width="100" height="100">
<polygon points="0,0 0,100 50,50 " fill="blue"></polygon>
<polygon points="50,0 50,100 100,50 " fill="blue"></polygon>
</svg>
This seems like it should be easy to do but I searched for "svg scale to fit" and "display all elements in svg in a fixed area" but I couldn't find anything related to my problem
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.