I'm playing around with SVGs and was working off of this example. However, in my
jsbin the pattern isn't repeating for my <rect> elements.
And when I change the height and width attributes (no I'm not changing the x , y attributes) the rect svg objects just disappear when I enter in large values.
I'm just dipping my toe into SVGs so my knowledge is quite limited. I figure it is something simple but am not seeing what I'm doing incorrectly when I compare to what I'm doing to the grid2.svg that I'm going off of.
You've written this...
<pattern id="OvalPattern2" patternUnits="objectBoundingBox" width="70" height="70" >
With objectBoundingBox units 1 is the size of the shape using it. So your pattern is 70 times the size of the object using it. I suspect you want .7 as the width/height.
Related
I am creating a hexmap chart using svg element in d3js. The chart is working fine though I need to reduce the size of the hexagons and is unable to.
As per my knowledge, it is somewhat related to the path element of HTML
This is what my path element looks like:
<path d="M395.1641842489362,-477.03703703081476L431.0882010021053,-456.29629628799995L467.0122177552744,-477.03703703081476L467.0122177552744,
-518.5185185164444L431.0882010021053,-539.2592592592592L395.1641842489362,-518.5185185164444Z" class="border" fill="rgb(240, 75, 35)" stroke="#FFFFFF" stroke-width="3"></path>
Please let me know if you have any idea around it!
I don't see the whole picture but every element can be transformed. For example if you want to scale down your path, just add the property transform="scale(0.75)" to your tag. The number is a multiplier, so 0.75 means 25% smaller. 0.5 would mean half the size.
I am making a small interactive website using scrollmagic and GSAP to animate SVG elements.
However, when animating the y value of an element that had a rotate() transformation, the transformation was removed.
Adding the rotation into the animation did not yield the right result; the rotation was removed from the animation and then animated back in again.
Does anyone know how to preserve the rotation of an SVG element when animating other attributes in GSAP?
example code:
html:
<svg height='300px' width='500px' style='position: absolute;'>
<rect id='rect' width='200' height='75' style='fill:#888;stroke-width:2;stroke:#000' y='0' x='120' transform='rotate(45)' />
</svg>
js:
TweenMax.to('#rect', 1, {x: 100})
fiddle: https://jsfiddle.net/159phcxw/
Short answer: as Tahir suggested, just add this to your JS code:
TweenMax.set("#rect", {rotation:45});
I'd strongly recommend handling all of your transforms through GSAP because it protects you from a bunch of things like browser inconsistencies and loss of precision with rotational values beyond 360 degrees.
GSAP records transform-related values in a special _gsTransform object that's attached to the element itself; this not only boosts performance (no re-parsing of computed style matrix or matrix3d values), but also permits complete independent control of each transform component (rotation, scaleX, scaleY, x, y, skewX, skewY, etc.) regardless of timing offsets or extreme rotational values (impossible with CSS).
In your case, you were mixing transforms - you put the rotation in the attribute and then you asked GSAP to handle the translation. GSAP can actually parse matrix() values you put into the transform attribute or it can also parse any CSS transforms, but you happened to define only a rotate() which is not able to be parsed (I'll spare you the explanation).
Setting any transform-related values through GSAP gets you the best performance and compatibility, plus it's easier to look up current values inside the _gsTransform object later if you need them.
I'm currently working on this using x3dom: http://folk.ntnu.no/emilh/modell.htm , and I have two problems.
First one is that when I load my model, it appears in a awkward position, I'd like to automaticly flip it and zoom so that you see it from a better side. Currently I have no idea how to do this.
Secondly I'm trying to make a button that toggles the visibility on the outer shell of the model, I've identified the shapes that builds up the shell, but I don't know how to toggle their visibility. So if I have the ...., what can I do to it to make it hidden?
Sorry for mixing Norwegian and English on the site :P
And thanks in advance!
There are two ways of dealing with the zoom level.
Change the scale attribute of your transform, making the shape bigger.
Add a viewpoint node, like so
<viewpoint id="view_id" position='0 10 15' orientation='-1 0 0 0.5'></viewpoint>
The position and orientation values will depend on your scene.
It is asked long time ago but for people who have same problem the solution is like following:
You can use
<vievpoint position="0 0 250">
to change default zoom of your object. first and second parameters for x y coordinates and third one for zoom. If you want to zoom out you can use positive values, to zoom in you can use negative values.
Whole code is like this:
<x3d width='500px' height='400px'>
<scene>
<viewpoint position="0 0 250"></viewpoint>
<tramsform>
<inline url="path">
</transform>
</scene>
</x3d>
For the visibility you can use the transparency attribute on the material tag. http://doc.x3dom.org/author/Shape/Material.html
The shape is still there but you can modify the transparency of it.
I have an SVG file wich i'm editing in illustrator. I've already used the paths information inside this file to create a Raphael object with it. What I want to do now is to add text to some parts of the drawing. The thing is that Raphael would only accept X and Y coodinates, and the text inside the SVG file is a matrix.
Basicly I need to turn this:
<text transform="matrix(1 0 0 1 583 562)" font-size="12">Argentina</text>
into something like this:
var t = paper.text(x, y, "Argentina");
Is that possible? I've also tried turning the text into outlines, but the resulting path is to complex, and I prefer something lighter.
In your specific case the matrix just translates to x: 583 and y: 562, but if your element is scaled or rotated then these values will be misleading.
You can apply transform matrices directly in Raphael, all you need to to is...
transformation = Raphael
.matrix(1, 0, 0, 1, 583, 562)
.toTransformString();
text = paper
.text(0, 0, "Argentina")
.attr("font-size", 12)
.transform(transformation)
Now, if don't like applying transformations on your elements, you can work out the matrix transformations into a more human readable format by doing console.log(transformation), this will give you a string such as t100,100r30,100,100s2,2,100,100 which is well explained in Raphael's documentation
I hear your problem. I looked into these issues when I wrote an SVG to Raphael converter (One of the first).
The converter takes all transforms out of path and changes all coordinates from relative to Absolute. In svg Text there is a lot to get your head around. The coverter I wrote offers some support for converting Text. I thought you might try putting your SVG through the converter and see what javascript it chucks out with reference to text.
The converter puts out at least a couple of formats but the 2 you might try are the default output.
Go to the converter page
Upload your SVG just using the defaults. When you click "Collect Raphael" that will take you to the interactive javascript produced. This only deals with paths to see what work was done with Text click the "or page" link...
If you need help, I will check back...
I'd like to build a function like
fromHeretoThere(x1,y1,x2,y2){
//....
}
So that I can move a <div> or an image from one point on the HTML page to another point in a curve.
Is this doable only using Canvas? HTML5? any plugin/scripts yo suggest?
Edit: Here's a work in progress that packages up the second concept described below as a re-usable JS object. You can edit the code or visually drag the curve to see the resulting code:
http://phrogz.net/SVG/animation_on_a_curve.html
I'd personally use SVG, which makes this sort of thing (animating along an arbitrary Bézier curve) trivial using the <animateMotion> element. As a bonus, you can even cause it to calculate the rotation for you. Some examples:
http://www.w3.org/TR/SVG/images/animate/animMotion01.svg
https://developer.mozilla.org/en/SVG/Element/animateMotion
http://devfiles.myopera.com/articles/76/SolarSystem.svg
Note that you don't even have to actually use SVG to display the result; you could simply create an off-screen SVG with this animation and sample the transform of the animated element to get your desired point/rotation.
Alternatively (if you don't want the rotation, or want to calculate it yourself while controlling the rate of traversal) you can create an SVG path and just use getPointAtLength()/getTotalLength() to find where you should be along the path at a given percentage of the total traversal distance. With this you don't even need an SVG document:
// Moving along an S curve from 0,0 to 250,450
var p = document.createElementNS('http://www.w3.org/2000/svg','path');
p.setAttribute('d','M0,0 C350,20 -200,400 250,450');
var len = p.getTotalLength();
for (var i=0;i<=100;i+=10){
var pct = i/100;
var pt = p.getPointAtLength(pct*len);
console.log( i, pt.x, pt.y );
}
// 0 0 0
// 10 65.54324340820312 10.656576156616211
// 20 117.17988586425781 49.639259338378906
// 30 120.2674789428711 114.92564392089844
// 40 100.49604034423828 178.4400177001953
// 50 78.06965637207031 241.1177520751953
// 60 63.526206970214844 305.9412841796875
// 70 74.59959411621094 370.6294860839844
// 80 122.1227798461914 415.8912658691406
// 90 184.41302490234375 438.8457336425781
// 100 250 450
Now all you have to do is set the .style.top and .style.left of your <div> or <img> appropriately. The only 'hard' part is deciding what you want to the curve to look like and defining where to put the handles.
sometimes googling is easier:
http://yuilibrary.com/yui/docs/anim/curve.html
You can use at least:
JavaScript (http://api.jquery.com/animate/)
CSS3 Transitions (http://www.the-art-of-web.com/css/css-animation/)
Canvas (https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images)
CSS3 is probably the easiest, but JavaScript would be the most browser compatible.
You may also want to look at something like this:
http://jsanim.com/
http://processingjs.org/
What is it that you're trying to do?
Using jQuery animate's step function you can animate in any curve you'd like.
For some things using a canvas is better, but for most small and simple animations just changing css values with jQuery (this is what animate does) is faster and simpler.
Here's a quick demonstration I made, built on top of the jQuery.path plugin : http://jsfiddle.net/zVddG/