I am trying to figure out the right way to do movement in canvas. From my research it appears that a lot of tutorials use redrawing. I got movement to work by clearing my shapes and recreating them (redrawing?): http://pastebin.com/VuYdtM2U
I am wondering though if that is the way it is supposed to be done or if there is a better way. I can imagine clearing an image and creating it a pixel over every fraction of a second would get resource intensive.
Generally, It is done this way only. Most of the Browser Games are coded this way and a lot of clearing and re rendering takes place seamlessly. Modern Browsers can handle a lot of rendering without any delay.
The main reason behind this is that, Canvas is just a sort of image for the browser and it just draws on it and don't have to retain any Element DOM Structure.
Whereas in case of SVG, all elements have to be appended / deleted /added to the DOM Structure which takes toll if there are a lot of elements.
There are several factors which can help us decide which technique is better as per the case.
Generally for Page with DOM elements less than 10,000... Both are efficient.
You can also use mixture of Canvas , SVG and Multiple Canvas (like you may want to show a hover canvas, over another canvas)..
Try this
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height=400 width=500>
<g>
<rect transform="translate(-20,-20)" height="40" width="40" style="fill:#777; stroke:none;"/>
<animateMotion fill="freeze" path="M 0 0 Q 190 160 150 70 T 200 150 T 300 200 T 200 200" dur="3.14159s" repeatCount="indefinite"/>
</g>
<path d="M 0 0 Q 190 160 150 70 T 200 150 T 300 200 T 200 200" style="fill:none;stroke:#F00;stroke-width:5"/>
</svg>
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'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.
I'm trying to render a react component with an inline SVG element that has a text along a path. This is what is returned from the render method:
<div className="textsvg">
<svg width="100%" height="100%" viewBox="-50 -50 100 100">
<defs>
<path id="textPathTop" d={`
M 0 40
A 40,40 0 0 1 0,-40
A 40,40 0 0 1 0,40`}></path>
<path id="textPathBottom" d={`
M 0 -41.8
A 41.8,41.8 0 0 0 0,41.8
A 41.8,41.8 0 0 0 0,-41.8`}></path>
</defs>
<use xlinkHref="#textPathBottom" fill="none" stroke="red"></use>
<text fill="red" fontSize="4.5"><textPath xlinkHref="#textPathBottom">We go up, then we go down, then up again</textPath></text>
</svg>
</div>
This shows the "We go up, then we go down, then up again" text, but just in a straight horizontal line starting from 0,0.
Copying the resulting html into a codepen shows the result as it should look, using the textPath.
Why is the textPath ignored when rendered with ReactJS?
Using React 15.3.1 and checking in FF 52.0.2(32bit)
Already tried using _dangerouslySetInnerHTML for textPath, but that didn't work either.
Check if you have a <base href="..."> tag in your <head> element.
If so, Firefox won't be able to display your text, while Chrome will.
Firefox is searching for your xlink:href attribute at the base href url, it does not find it, so the text is just ignored.
A workaround is to use an absolute url :
<textPath xlink:href="http://pathtoyourpage#textPathBottom">
It is easier if you generate the svg with javascript :
textPath.setAttribute('xlink:href', `${location.href}#textPathBottom`)
Some similar weird behavior happen with mask and filter attributes.
I have an inline SVG and try to loop over all paths within a group element. When using childNodes I found out that Browsers add an extra text child for every path. I am curious why browsers are doing so and if there is a smart way to just loop over real child elements.
I've created a little JSBin to demonstrate the behaviour: http://jsbin.com/tutisakege/1/edit?html,css,js,console,output
(Check the output of the console)
HTML
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 100 100">
<g id="test">
<path d="M50 0 L0 100 L100 100 Z" />
<path class="red" d="M25 0 L25 25 L75 0 L75 25 Z" />
</g>
</svg>
JS
var group = document.querySelector('#test'),
children = group.childNodes;
The childrenobject now holds 5 entries even though my test group only has 2 paths.
Note: I know I could loop over all entries and check whether I have an instance of SVGPathElement but that seems a but cumbersome to me.
(I've tested it in the latest Chrome and Firefox)
Browsers didn't add it, they are right there in the document source. There is whitespace between the path elements i.e. carriage returns and spaces.
You can skip the text by using element.children but that apparently only works on Firefox and Chrome so if you want it done portably you'll probably need to stick with checking for element instances as you suggest in the question.
is there a way that I can animate the "d" attribute of the following svg path?
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path id="theEl" d="M0 0, L 0 500, L 600 500, L 600 0" stroke="black" stroke-width="10"/>
</svg>
If I want to change it I know that this would be enough:
document.getElementById('theEl').setAttribute( 'd', 'M0 0, L 0 200, L 200 200, L 600 0' );
But what if we want this to animate/morph? Say I have a button that on click it toggles between these 2 paths.
I've seen a couple of answers about it and they suggest to create an SVG animation element and then add it to the svg DOM element. But this would mean that every time the button is clicked we would need to append/remove that animation element right? Isn't there a simpler way? Without using any svg libs?
Thanks a bunch!
Just create the SMIL animation statically i.e. as markup as a child of the path and have it run when the button is clicked.
<animate begin="click" ...
You can add the animation elements to the svg directly, no need for scripting.
For a neat example and some further details, see this blogpost by Tavmjong Bah.