HTML/JS - SVG fill - svg

In my HTML code I have:
<animate id= animationBottle attributeName="y1"
from="101%"
to="70%"
begin="0s"
dur="1s"
fill="freeze">
</animate>
Is there a way to make the 'to="70%"' variable with JS?
Thanks in advance!


You can use set the value (70%) of the attribute ("to") with Javascript.
document.getElementById("animationBottle").setAttribute("to", "70%");
If you have the value of 70 as a variable (var value = 70) and want to use that with the setAttribute, you do the following:
var value = 70;
var value_perc = `${value}%`;
document.getElementById("animationBottle").setAttribute("to", value_perc);
You could also make a function with the number as input.

Related

Svelte / D3 Function to get Point on a Path

I'd like to create a function that gets the coordinates of the nth point along an SVG path, while using Svelte and D3.
Note, the blue dot is not part of the code and there just for illustration.
I've tried this...
// the path generator
const pathLine = line()
.x(d => xScale(d.age))
.y(d => yScale(d.temp))
.curve(curveBasis);
function pointFromPath(position){
pos = pathLine(data).getPointAtLength(position);
return pos
}
$: console.log(pointFromPath(2))
...
<svg viewBox="0 0 100 100">
{#if (show)}
<path transition:draw={{duration: 2000}}
d={pathLine(data)} />
{/if}
</svg>
But it doesn't work and I'm not sure what to try next. My redproducable code is here
https://svelte.dev/repl/189b1ff0485f4697b3061dd29daf1d3a?version=3.32.3

The problem is that pathLine(data) is returning a string representing the "d" and not the DOM-element itself.
See a working example here:
https://svelte.dev/repl/76d1d7d0a38b4f6c9f02f9ffb0200ea5?version=3.32.3

Is there a way to make a map element(country/region) fly into its correct location on the map using svg animation?

I am just starting to play around with SVG animations. is it possible to make a country follow a random path to its correct place on the map? The equivalent of puzzle pieces assembling themselves when the box is opened is the best I can think of. Is this even possible with SVG animations or will something else be required?
This is what I have right now
<svg xmlns:svg="http://www.w3.org/2000/svg" viewBox="500 180 2500 1500">
<g>
<path id="US-WA" d="m 1204.9427,925.58655 c -1.3898,1.54162 -3.5681,6.4786 -0.2995,5.99944 -2.5653,2.58922 -3.3814,8.57974 -8.3992,5.99945 -1.6219,3.81537 1.3975,1.05569 2.0998,3.29967 0.4051,1.29541 -0.1592,2.49675 -0.5999,3.59966 -0.574,1.43862 -1.0531,2.67841 -0.5999,4.19962 0.9522,3.19931 -7.9766,5.68493 -8.3992,9.89904 -0.3437,3.41803 -2.4129,5.35128 -4.7996,6.89936 -1.6428,1.06557 -3.5355,1.94896 -5.0995,2.99971 -1.0386,0.69641 -3.9323,3.80031 -5.3995,2.99974 -2.3214,-1.26485 -4.2692,-0.25119 -5.0995,2.09979 1.0922,-2.53862 0.4348,-2.72427 -1.7999,-0.89992 2.8988,-1.68447 2.8988,-2.18139 0,-1.49986 3.4375,-0.54169 5.4851,-4.00727 8.6992,-5.09951 -1.4791,0.92554 -2.2605,2.696 -2.0998,4.49958 1.1896,-1.31713 2.6821,-2.51823 4.1996,-3.59966 3.3001,-1.51067 7.1003,-7.47473 3.2997,-5.39949 1.1845,-3.59217 9.6433,-5.94207 8.3992,-9.29912 -0.7286,0.44537 -1.4265,0.73373 -2.0998,1.19988 0.5808,-0.54475 1.0436,-1.2686 1.1999,-1.79983 0.5241,-1.76484 -0.3734,-3.74478 0.6,-5.3995 -1.6785,0.33627 -2.8771,1.62713 -3.2997,3.2997 -0.03,-3.66061 -9.5411,-2.9717 -13.1988,-3.59966 -6.0712,-1.04164 -10.1546,-4.19955 -15.8985,-5.69945 -3.6011,-0.94045 -7.7344,10.52732 -7.4993,14.09865 0.4944,7.49384 -4.7149,14.61007 -6.8993,21.59794 0.5058,-0.7678 1.1629,-1.73608 1.7998,-2.39975 1.0981,1.3452 2.7199,2.51886 4.4996,2.39975 -3.8928,1.13991 -8.3028,1.07697 -8.9992,5.99945 1.7737,-0.30948 3.4305,0.0307 4.7996,1.19988 -4.3035,-1.98209 -5.6594,6.11962 -9.2991,6.89936 0.7055,-1.47317 1.2194,-2.97283 1.7998,-4.49958 -0.289,0.51433 -1.36,2.46258 -2.0998,4.19962 -0.9513,2.23333 -1.3747,4.25619 0.8994,3.89962 2.6815,-0.41969 3.9566,-1.05119 6.5994,0.29996 0.1604,0.0815 0.4166,0.19315 0.5999,0.29997 0.8697,0.50617 1.9523,1.19458 2.9997,1.49987 0.5194,-0.12589 1.4274,0.31936 1.7999,0 -0.3763,0.16368 -0.7881,0.34662 -1.1999,0.29996 3.0295,3.11021 2.4204,6.05171 1.7998,8.39921 -0.621,2.3475 -1.3217,4.091 1.1999,5.3995 2.5216,1.3085 5.1278,-0.2432 8.0992,-2.3998 2.9714,-2.1566 6.495,-4.746 10.4991,-5.0995 8.0082,-0.7071 17.5494,6.3653 27.5974,5.9994 10.0479,-0.3658 14.9111,-7.1919 30.597,-9.29907 7.843,-1.05361 20.1041,-3.77898 32.097,-4.79957 5.7862,-0.49243 11.3081,-0.53657 16.4985,0.29999 0.048,-0.37868 0.261,-0.83522 0.2994,-1.19991 0.5044,-4.62142 0.3005,-8.09921 0.3005,-8.09921 l 34.1968,-59.69438 z m -8.6991,14.69864 c -4.3838,2.4582 -7.1019,6.99959 -3.8997,11.69887 2.631,-0.41669 3.1785,-3.76633 0,-3.59966 1.4791,-1.87195 0,-4.22926 2.0998,-5.69946 1.2679,-0.88982 3.6689,-0.20029 1.7999,-2.39975 z m -14.6986,15.29853 c 1.1968,-0.62576 1.5042,-0.37032 -0.8995,2.09979 -0.8773,0.49186 -1.6983,1.11039 -2.6997,1.49987 -2.5356,0.99105 -6.2994,3.05843 -6.2994,6.29941 -0.7756,0.0354 -1.6623,-0.25208 -2.3998,-0.89991 2.8184,-2.25589 5.7052,-4.56967 8.6992,-6.59938 0.4713,-0.32138 2.4028,-1.77405 3.5996,-2.39978 z" />
<animate attributeType="XML" attributeName="x" from="600" to="1000"
dur="10s" repeatCount="indefinite" />
</g>
</svg>
Any help or pointers is greatly appreciated. Thanks

Path elements don't have an x attribute. You can do the same thing with a transform animation though.
Additionally an animate element must either be the child of the path or point to the path vi the path's id. Last I checked Chrome's accessing of elements with id values containing a - sign from SMIL was buggy so given that's what you have as an id I've made the animateTransform a child of your path.
Note that SMIL can't do random on its own, you could create something that looks like a random walk but it's going to be the same each time basically. You could create random SMIL animations via javascript.
<svg xmlns:svg="http://www.w3.org/2000/svg" viewBox="500 180 2500 1500">
<g>
<path id="US-WA" d="m 1204.9427,925.58655 c -1.3898,1.54162 -3.5681,6.4786 -0.2995,5.99944 -2.5653,2.58922 -3.3814,8.57974 -8.3992,5.99945 -1.6219,3.81537 1.3975,1.05569 2.0998,3.29967 0.4051,1.29541 -0.1592,2.49675 -0.5999,3.59966 -0.574,1.43862 -1.0531,2.67841 -0.5999,4.19962 0.9522,3.19931 -7.9766,5.68493 -8.3992,9.89904 -0.3437,3.41803 -2.4129,5.35128 -4.7996,6.89936 -1.6428,1.06557 -3.5355,1.94896 -5.0995,2.99971 -1.0386,0.69641 -3.9323,3.80031 -5.3995,2.99974 -2.3214,-1.26485 -4.2692,-0.25119 -5.0995,2.09979 1.0922,-2.53862 0.4348,-2.72427 -1.7999,-0.89992 2.8988,-1.68447 2.8988,-2.18139 0,-1.49986 3.4375,-0.54169 5.4851,-4.00727 8.6992,-5.09951 -1.4791,0.92554 -2.2605,2.696 -2.0998,4.49958 1.1896,-1.31713 2.6821,-2.51823 4.1996,-3.59966 3.3001,-1.51067 7.1003,-7.47473 3.2997,-5.39949 1.1845,-3.59217 9.6433,-5.94207 8.3992,-9.29912 -0.7286,0.44537 -1.4265,0.73373 -2.0998,1.19988 0.5808,-0.54475 1.0436,-1.2686 1.1999,-1.79983 0.5241,-1.76484 -0.3734,-3.74478 0.6,-5.3995 -1.6785,0.33627 -2.8771,1.62713 -3.2997,3.2997 -0.03,-3.66061 -9.5411,-2.9717 -13.1988,-3.59966 -6.0712,-1.04164 -10.1546,-4.19955 -15.8985,-5.69945 -3.6011,-0.94045 -7.7344,10.52732 -7.4993,14.09865 0.4944,7.49384 -4.7149,14.61007 -6.8993,21.59794 0.5058,-0.7678 1.1629,-1.73608 1.7998,-2.39975 1.0981,1.3452 2.7199,2.51886 4.4996,2.39975 -3.8928,1.13991 -8.3028,1.07697 -8.9992,5.99945 1.7737,-0.30948 3.4305,0.0307 4.7996,1.19988 -4.3035,-1.98209 -5.6594,6.11962 -9.2991,6.89936 0.7055,-1.47317 1.2194,-2.97283 1.7998,-4.49958 -0.289,0.51433 -1.36,2.46258 -2.0998,4.19962 -0.9513,2.23333 -1.3747,4.25619 0.8994,3.89962 2.6815,-0.41969 3.9566,-1.05119 6.5994,0.29996 0.1604,0.0815 0.4166,0.19315 0.5999,0.29997 0.8697,0.50617 1.9523,1.19458 2.9997,1.49987 0.5194,-0.12589 1.4274,0.31936 1.7999,0 -0.3763,0.16368 -0.7881,0.34662 -1.1999,0.29996 3.0295,3.11021 2.4204,6.05171 1.7998,8.39921 -0.621,2.3475 -1.3217,4.091 1.1999,5.3995 2.5216,1.3085 5.1278,-0.2432 8.0992,-2.3998 2.9714,-2.1566 6.495,-4.746 10.4991,-5.0995 8.0082,-0.7071 17.5494,6.3653 27.5974,5.9994 10.0479,-0.3658 14.9111,-7.1919 30.597,-9.29907 7.843,-1.05361 20.1041,-3.77898 32.097,-4.79957 5.7862,-0.49243 11.3081,-0.53657 16.4985,0.29999 0.048,-0.37868 0.261,-0.83522 0.2994,-1.19991 0.5044,-4.62142 0.3005,-8.09921 0.3005,-8.09921 l 34.1968,-59.69438 z m -8.6991,14.69864 c -4.3838,2.4582 -7.1019,6.99959 -3.8997,11.69887 2.631,-0.41669 3.1785,-3.76633 0,-3.59966 1.4791,-1.87195 0,-4.22926 2.0998,-5.69946 1.2679,-0.88982 3.6689,-0.20029 1.7999,-2.39975 z m -14.6986,15.29853 c 1.1968,-0.62576 1.5042,-0.37032 -0.8995,2.09979 -0.8773,0.49186 -1.6983,1.11039 -2.6997,1.49987 -2.5356,0.99105 -6.2994,3.05843 -6.2994,6.29941 -0.7756,0.0354 -1.6623,-0.25208 -2.3998,-0.89991 2.8184,-2.25589 5.7052,-4.56967 8.6992,-6.59938 0.4713,-0.32138 2.4028,-1.77405 3.5996,-2.39978 z" >
<animateTransform attributeName="transform" type = "translate" from="600" to="1000"
dur="10s" repeatCount="indefinite" />
</path>
</g>
</svg>

SVG issue : using values and calcmode

I'm learning how to animate svg.
I can animate between two shapes with calcMode="spline", I can animate between three shapes without calcMode="spline", but I can't animate between three shapes with calcMode="spline".
Here's my example :
<animate
attributeName="d"
attributeType="XML"
begin="0"
from="M662.1,170.5c-0.2,0-0.3-0.1-0.4-0.3l-3.5-7.9c-0.1-0.2,1-0.1,1-0.1l3.2,7.7c0.1,0.2,0,0.5-0.2,0.6
C662.2,170.5,662.1,170.5,662.1,170.5z"
to="M704,146.5c-0.6,0-1.1-0.3-1.4-0.9l-12.4-28.1c-0.3-0.7,3.6-0.5,3.6-0.5l11.6,27.4c0.3,0.8,0,1.6-0.8,2
C704.4,146.4,704.2,146.5,704,146.5z"
dur="2s"
values="
M662.1,170.5c-0.2,0-0.3-0.1-0.4-0.3l-3.5-7.9c-0.1-0.2,1-0.1,1-0.1l3.2,7.7c0.1,0.2,0,0.5-0.2,0.6
C662.2,170.5,662.1,170.5,662.1,170.5z;
M704,146.5c-0.6,0-1.1-0.3-1.4-0.9l-16.4-25.1c-0.3-0.7,3.6-0.5,3.6-0.5l15.6,24.4
c0.3,0.8,0,1.6-0.8,2C704.4,146.4,704.2,146.5,704,146.5z;
M704,146.5c-0.6,0-1.1-0.3-1.4-0.9l-12.4-28.1c-0.3-0.7,3.6-0.5,3.6-0.5l11.6,27.4c0.3,0.8,0,1.6-0.8,2
C704.4,146.4,704.2,146.5,704,146.5z"
calcMode = "spline"
keySplines = "0 0.75 0.25 1"
keyTimes = "0;1;2"
/>
If I remove values an adjust keyTimes="0;1", it works.
If I remove calcMode, keySplines and keyTimes, it works.
But it doesn't work together.
Did I made a mistake somewhere, or can't we use both together?
Thanks for helping!

From the SVG Specification:
the ‘keySplines’ values are the control points. Thus, there must be one fewer sets of control points than there are ‘keyTimes’.
You've one keySplines value so you need 2 keyTimes values. Alternatively, you need to have 2 keySplines values in order to support 3 keyTimes values.

fisheye distortion and codeflower

I have successfully implemented a codeflower view for a sample dataset. The code used to achieve that is:
var currentCodeFlower;
var createCodeFlower = function(json) {
document.getElementById('jsonData').value = JSON.stringify(json);
if(currentCodeFlower) currentCodeFlower.cleanup();
var total = countElements(json);
//console.log(total);
w = parseInt(Math.sqrt(total) * 50, 10);
h = parseInt(Math.sqrt(total) * 50, 10);
currentCodeFlower = new CodeFlower("#visualization",w,h).update(json);
};
d3.json('data.json', createCodeFlower);
I now wish to add a fisheye distortion to this visualization and am not sure how to go about this. I have looked into the documentation of fisheye but as I used codeflower.js I am not sure how to access the svg element anymore. Any help is appreciated. Thank you.

You can do a fish-eye distortion using a SVG filter (feDisplacement) but you need a very specific displacement map to achieve it. This is an example I wrote based on Inkscape's reference image for fisheye distortion. See other examples for how to express this in D3 syntax.
<filter id="trilight" x="-50%" y="-50%" width="200%" height="200%">
<feImage xlink:href="http://tavmjong.free.fr/INKSCAPE/MANUAL/images/FILTERS/bubble.png" result="lightMap" x="30" y="0" width="600" height="600"/>
<feDisplacementMap in2="lightMap" in="SourceGraphic" xChannelSelector="R" yChannelSelector="G" scale="10">
</feDisplacementMap>
</filter>

Raphael and preserveAspectRatio

With RaphaelJS, this command inserts an image:-
var myImg = paper.image('image.svg', 100, 100, 150,150);
and the SVG output is:-
<image x="100" y="100" width="150" height="150" preserveAspectRatio="none" href="image.svg"/>
Question: How do I directly access preserveAspectRatio attribute and change it to xMidYMid meet - if you examine myImg.attr(), it doesnt show this attribute.
The roundabout way is navigate the SVG DOM tree, and execute svgImg.setAttributeNS(null,"preserveAspectRatio" , "xMidYMid meet" );
Note: Only some images require none while the rest needs the xMidYMid meet tag. Hence I can't set this attribute on parent <svg>
Note2: Chrome doesn't support preserveAspectRatio with SVG images. Use FF or IE to test.

At the source code level, preserveAspectRatio is hardcoded to none
Answer The quickest way to change this:-;
myImg[0].preserveAspectRatio.baseVal.align = 6 (1 = off, 6 = xMidYMid)
myImg[0].preserveAspectRatio.baseVal.meetOrSlice = 1 (1 = meet, 2 = slice)
Update:- jQuery style:-
jQuery(myImg.node).prop('preserveAspectRatio').baseVal.align = 6 ;
jQuery(myImg.node).prop('preserveAspectRatio').baseVal.meetOrSlice = 1 ;
Raphael's docs for Element.node "Gives you a reference to the DOM object, so you can assign event handlers or just mess around. Note: Don’t mess with it."

You can call these parameters on the Raphael canvas as a whole.
First create SVG:
var paper = Raphael('content',xSize,ySize);
Place image in it:
paper.image('image.svg', 100, 100, 150,150);
Then change attributes of svg:
paper.canvas.setAttribute('preserveAspectRatio', 'xMidYMid meet');

Resources