I want to make an animated bar chart with scroller. I already made the scroll and the data interactivity, but I stuck at the transition.
I use the CSS transition on each <g> element. While it's animating and moving toward the right direction, they start at nowhere/or center(?), but not from the last position. I made the data key consectetur to be always the largest every time, so it is supposed to be always on top of the chart. But it's always animating from the center or the bottom, not staying on top.
<svg>
{#each data as d}
<!--translate Y reactive to data changes -->
<g class="gBar" transform="translate(0 {d.id * 10})">
<text>Lorem ipsum</text>
<!--rect width reactive to data changes -->
<rect x="0" y="0"
width={d.val/max * w * 0.5}
height="10"
fill="black"/>
</g>
{/each}
</svg>
<style>
/* add transition to the gBar class */
.gBar {
transition:transform 1s;
}
</style>
I tried the svelte transition directive, but a bit confused to trigger it with the index change by the scroller. (The example of transition directive is using boolean checkbox)
This is what I already made:
https://svelte.dev/repl/099ac842d7a54ab7a674545f8dc6d622?version=3.53.1
I'm exporting svgs from figma and unite in svg stack to adress later using icons.svg#ID.
Html code is: <img src="icons.svg#logo" class="svg-logo-dims"/>
Class "svg-logo-dims" sets width and height, for example: width: 20px; height: 20px for img. Why my svg doesn't cover 20x20? It's centered in img element with a lot of free space. I have to object-fit: cover to make it look like in figma layout.
On the other hand if i insert raw svg in my html, specifying same width and height it would be really 20x20 without free space.
svg markup (deleted other svgs):
<?xml version="1.0" encoding="utf-8"?><svg viewBox="0 0 354 519" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style>:root>svg{display:none}:root>svg:target{display:block}</style><svg fill="none" viewBox="0 0 20 20" id="logo" xmlns="http://www.w3.org/2000/svg"><path d="M18.01 5.694a9.092 9.092 0 01-3.718 12.316 9.053 9.053 0 01-5.352 1.02A9.097 9.097 0 015.694 1.976a9.07 9.07 0 018.06-.266 9.055 9.055 0 014.256 3.984z" stroke="url(#hpaint0_linear_0_497)"/><defs><linearGradient id="hpaint0_linear_0_497" x1=".756" y1="8.723" x2="20.965" y2="9.992" gradientUnits="userSpaceOnUse"><stop offset=".288" stop-color="#555248"/><stop offset=".78" stop-color="#1B1A17" stop-opacity="0"/></linearGradient></defs></svg></svg>
It seems i found a solution. Gulp-svg-sprite possible has an error. It adds viewBox of first underlying svg and sets it to whole svg tag:
<?xml version="1.0" encoding="utf-8"?><svg viewBox="0 0 354 519" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style>:root>svg{display:none}:root>svg:target{display:block}</style><svg fill="none" viewBox="0 0 354 519" id="ads-bg-ico"...</svg></svg>
After deleting duplicating viewBox from parent svg element, all underlying svgs inside parent svg become to work properly and fill img element.
UPD: with release of svg-sprite 2.0.0 rootviewbox: false option added
I have an SVG file which contains about 50 embedded images. Now I wish to flip all the images vertically. The only way i found that does this is:
Copy the xlink:href to a browser and download the image
Flip the image in any image editor
Convert the image to a href code
Replace the xlink:href with the one newly generated
I don't want to use any SVG programs please, I hope for a coding help
Example code
<svg contentScriptType="text/ecmascript" zoomAndPan="magnify" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svg="http://www.w3.org/2000/svg" baseProfile="full"
contentStyleType="text/css" id="svg2" version="1.1" width="460pt" xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#" preserveAspectRatio="xMidYMid meet" viewBox="0 0 460 130" height="130pt"
xmlns="http://www.w3.org/2000/svg">
<image x="0" y="0" width="460" xlink:href= "data:image/png;base64,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"
id="image6418" height="130"/>
Add transform="scale(1, -1)" to the images. You may need to translate them back if they aren't centred round the origin. So in the case above you want to add this to the image element:
transform="translate(0, 130) scale(1, -1)"
I embedded an SVG object in an HTML page as follows:
<embed id="svgImg" src="bo5rkbgs5vtsmv053regld2t14.svg"
type="image/svg+xml" />
However, the resulting image (both on Firefox and Chrome) is trimmed and it look like that:
(Notice how "Step Response" and "Time" do not appear properly). I have checked the file on the server side and it is fine. Any ideas?
Having had a second look at your code your svg image is still too small.
You need to set the height to 100% and the image height to 500px.
<embed id="svgImg" height="100%" type="image/svg+xml" src="s1d5ckv8bojltpturlonh1uap5.svg">
<svg width="576" height="500" viewBox="0 0 576 432" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
....
This fixes the problem in firefox v8.0
Just tweak your viewBox attribute so that it fits your image.
For example, you could try this:
viewBox="-10 -10 596 452"
Update:
To generate the viewBox dynamically with JS, something like this should work:
var bbox = document.documentElement.getBBox();
var viewbox = document.documentElement.viewBox.baseVal;
viewbox.x = bbox.x;
viewbox.y = bbox.y;
viewbox.width = bbox.width;
viewbox.height = bbox.height;
Note that this needs to be done on the svg document, so you may need to reach into it from the html document that embeds it, if so have a look at this example.
I made a logo in Inkscape. For learning I wanted to make a wheel shape in the logo rotate by the animation support in SVG.
It was easy to implement the rotation, but it was difficult for me to be able to specify the correct axis of rotation. The shape was a cog wheel and I wanted it to rotate around its center. Trial and error gave that the xy-coordinate (47.1275, 1004.17) (whose components are strangely asymmetric, but I guess that has to do with the transformation matrices Inkscape applies) was a good approximation (see animateTransform tag below), but how would I get that from first principles?
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 321.281 150.799" xmlns:dc="http://purl.org/dc/elements/1.1/">
<g transform="translate(-9.9178912,-891.57237)">
<g transform="matrix(1.9522781,0,0,1.9522781,4.6434311,-1008.1558)">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 47.1275 1004.17" to="45 47.1275 1004.17" dur="2s" fill="freeze" additive="sum" repeatCount="indefinite" />
<g transform="matrix(0.65043772,0,0,0.65043772,-143.67477,980.4256)" stroke="#666" stroke-miterlimit="4" stroke-dasharray="none" stroke-width="7.68713093" fill="none">
<path stroke-linejoin="miter" d="m293.404-3.51576c-2.73916,0-5.41514,0.287192-8,0.8125v6.1875c-3.47484,0.838872-6.7198,2.18462-9.6875,4l-4.375-4.375c-2.24264,1.48612-4.29226,3.22977-6.1875,5.125s-3.63888,3.94486-5.125,6.1875l4.375,4.375c-1.81538,2.9677-3.16112,6.21265-4,9.6875h-6.1875c-0.5253,2.58486-0.8125,5.26083-0.8125,8s0.2872,5.41515,0.8125,8h6.1875c0.83888,3.47485,2.18462,6.7198,4,9.6875l-4.375,4.375c1.48612,2.24264,3.22976,4.29227,5.125,6.1875s3.94486,3.63888,6.1875,5.125l4.375-4.375c2.9677,1.81538,6.21266,3.16113,9.6875,4v6.1875c2.58486,0.525308,5.26082,0.8125,8,0.8125,2.73916,0,5.41514-0.287192,8-0.8125v-6.1875c3.47484-0.838872,6.7198-2.18462,9.6875-4l4.375,4.375c2.24264-1.48612,4.29226-3.22977,6.1875-5.125s3.63888-3.94486,5.125-6.1875l-4.375-4.375c1.81538-2.9677,3.16112-6.21266,4-9.6875h6.1875c0.5253-2.58485,0.8125-5.26083,0.8125-8s-0.2872-5.41515-0.8125-8h-6.1875c-0.83888-3.47485-2.18462-6.7198-4-9.6875l4.375-4.375c-1.48612-2.24264-3.22976-4.29227-5.125-6.1875s-3.94486-3.63888-6.1875-5.125l-4.375,4.375c-2.9677-1.81538-6.21266-3.16113-9.6875-4v-6.1875c-2.58486-0.525308-5.26084-0.8125-8-0.8125z" stroke-dashoffset="162" stroke="#666" stroke-linecap="butt" stroke-miterlimit="4" stroke-dasharray="none" stroke-width="7.68713093" fill="none"/>
</g>
</g>
</g>
</svg>
From what I've read in the specification I would say the transformation matrices applied are
1.9522781 0 4.6434311
0 1.9522781 -1008.1558
0 0 1
and
0.65043772 0 -143.67477
0 0.65043772 980.4256
0 0 1
Are they applied on the xyz-coordinate (-9.9178912,-891.57237,0) after the translation transformation?
I guess a correct analysis above would get me the top left point of the path described, or maybe the coordinate for the first handle. After that, does one have to parse the path to decide the bounding-box and thereby the center (since it concerns a somewhat circular object) of the path?
Is it all a lesson in not trying to manually do animation on freely created shapes?
I think the transformations will be applied from the innermost outward, so transform="translate(-9.9178912,-891.57237)" will be done last. But you can ignore the other transformations if you put your animation in the innermost region, i.e. within the path itself:
<g transform1>
<g transform2>
<g transform3>
<path d="coordinates">
<animateTransform your transformation here>
</path>
</g>
</g>
</g>
Then you just need to find the centre of your path, which is easy to do in Inkscape, but tricky to do on-the-fly (related question here: programmatically How to get shape width in SVG document using java).
Personally, I'd use a script within the svg so you can use getBBox to find the bounding box of your shape. If you add the following element into your SVG you can make any element with the id="cog" turn about its centre:
<script type="text/ecmascript"><![CDATA[
var svgNS = "http://www.w3.org/2000/svg";
function init(evt)
{
if ( window.svgDocument == null )
{
svgDocument = evt.target.ownerDocument;
}
addRotateTransform('cog');
}
function addRotateTransform(target_id)
{
var element_to_rotate = svgDocument.getElementById(target_id);
var my_transform = svgDocument.createElementNS(svgNS, "animateTransform");
var bb = element_to_rotate.getBBox();
var cx = bb.x + bb.width/2;
var cy = bb.y + bb.height/2;
my_transform.setAttributeNS(null, "attributeName", "transform");
my_transform.setAttributeNS(null, "attributeType", "XML");
my_transform.setAttributeNS(null, "type", "rotate");
my_transform.setAttributeNS(null, "dur", "4s");
my_transform.setAttributeNS(null, "repeatCount", "indefinite");
my_transform.setAttributeNS(null, "from", "0 "+cx+" "+cy);
my_transform.setAttributeNS(null, "to", "360 "+cx+" "+cy);
element_to_rotate.appendChild(my_transform);
my_transform.beginElement();
}
]]></script>
You also need to add onload="init(evt)" as an attribute to the SVG tag. e.g.
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 321.281 150.799"
xmlns:dc="http://purl.org/dc/elements/1.1/"
onload="init(evt)">
This will call the init() function when the SVG is first loaded. The init() function calls addRotateTransform() which find the element with a given id. It then finds the centre of that object using getBBox() and adds an animateTransform method with the relevant centres. You can change the dur attribute which determines the speed of a full rotation.
It might seem like a lot of code, but I think it's the easiest way to determine the centre of a path. It also means to can easily add other rotating elements by add addRotateTransform('whatever-id'); to the init() function.