How can I take a path such as what you see below and have Javascript make a visible circle or dot based on the path class ?
As well output the points based on a canvas coordinates, canvas name being irrelevent, I hope ? ;-)
<path class="st0" d="M73.3,73.1"/>Jump to PostIm confused, do you want to replicate your SVG on to a canvas?
Jump to PostYou can change/set the fill color of a path with CSS.
.st0 { fill: blue; }You can also set the stroke color & width with CSS.
.st0 { fill: blue; stroke: yellow; stroke-width: 2; }
Jump to PostYes, I see now in your example that you only give the command (
M73.3,73.1) to move (Mandmstands formove) the pen tox=73.3andy=73.1coordinates, so you don't draw anything yet and therefore there's nothing to fill or to stroke. If you want a line between …
Jump to PostOkay, but then at least you still have to draw the little dots. Like I said what you have now are only pen movements.
Anyway.... this post explains the path syntax, so perhaps you can get out of it what you want.
Jump to PostYou can drav small circle eg
<circle r=".5" cx="73.3" cy="73.1" fill="black" />
Im confused, do you want to replicate your SVG on to a canvas?
What I want to do first is make each path class a single colored dot, it's not possible with CSS ?
You can change/set the fill color of a path with CSS.
.st0 {
fill: blue;
}You can also set the stroke color & width with CSS.
.st0 {
fill: blue;
stroke: yellow;
stroke-width: 2;
}gentlemedia - I already tried setting the fill to blue; that doesn't work because the points from the SVG are just that points, nothing gets applied to the points, and that it may be too small to notice. I can show you an example if you want to proove my point ?
Yes, I see now in your example that you only give the command (M73.3,73.1) to move (M and m stands for move) the pen to x=73.3 and y=73.1 coordinates, so you don't draw anything yet and therefore there's nothing to fill or to stroke. If you want a line between those coordinates then you will have to draw withL, l, H, h,V, or v a line. Which one to use depends on what you want to draw. :)
Okay, but then at least you still have to draw the little dots. Like I said what you have now are only pen movements.
Anyway.... this post explains the path syntax, so perhaps you can get out of it what you want.
https://css-tricks.com/svg-path-syntax-illustrated-guide/
You can drav small circle eg
<circle r=".5" cx="73.3" cy="73.1" fill="black" />Thanks gentlemedia, that was a beneficial link. Hopefully, as you said can lean towards solving this problem.
I don't think my first method will work. Onto my other question.
When working with Canvas within the <canvas></canvas> tags if, using the link I posted earlier I would place the group id <g id="Artwork_11"> within a canvas could I write to the console the absolute coordinates strictly based on the canvas of the path points ? Not sure if the results would be the same or different, I'm guessing different ?
When working with Canvas within the <canvas></canvas> tags if, using the link I posted earlier I would place the group id <g id="Artwork_11"> within a canvas
Why would you want to add svg's to canvas? Adding svg's to canvas is not just hard coding your svg within canvas tags. That's not how you would go about that. You can load an svg image into canvas with javascript and there are several ways to do that.
https://github.com/canvg/canvg
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas
Does the same apply with Paper.js; can I load my SVG into Paper.js then minipulate the SVG data ? I can't find anything in the Paper.js documentation on this specifically ?
Not sure either, but is there any specific reason you want to load an svg in canvas? I mean canvas is also for vector graphics which you can specifically modify through scripting and as far as I see you can only load an svg in canvas as an image and not as data/code.
Although you can convert your svg into a canvas javascript function with a tool like this http://www.professorcloud.com/svg-to-canvas/ and then you can manipulate/modify it with javascript.
I wanted to load my SVG into canvas as I have the shape I want, as was created in Illustrator. Then load that into Paper.js and minipulate the data. Possible the converting method will work, so I can load an miniplulate with Paper.js; anyone have experience with this ?
Are you trying to modify SVG data or just the resulting image it produces? If it's the former, then why bother with a canvas when the SVG object will serve just as well? If the latter, then there are ways to use your SVG as a data source for a canvas's blob data and it should render, and then you can modify the pixels to your hearts content.
Now, if your intention is the modify SVG data through a canvas interface, then you are building an interesting, and somewhat messy, technology, and I would encourage you to stick with pure SVG in that case. Of course, I don't know your requirements, nor what your intended use is, so that may also be a poor bit of advice.
My reasoning for the above suggestion is that SVG is a vector based system and canvas is raster based (this means it is flattened with each modification, and all pixels are merged together); where SVG there is an object in memory that is converted to a BMP via instructions for rendering (or whatever the browser wishes to use to express your data). In other terms - canvases are "lossy" where SVG's technically are not. This is also why canvases are faster, as SVG takes time to process and more memory space. In short, the conversion from SVG to Canvas is generally one way, unless you do some work to keep them in sync with each other (some how...?).
Maybe a little more info on what your end result will be will help to determine a best course of action?
I want to create an animated effect; since the SVG is done my route was to use Paper.js to import the points from the SVG file into a Canvas which Paper.js requires a CanvasID.
Then create the shapes using the points from the SVG file with Paper.js and once I had the shape re-created using paper.js; my idea was to move it over to jQuery or Javascript to create the animated effect. I understand that Canvas Rasterizes everything but I suppose as long as I can originally work with SVG data it shouldn't pose a problem ?
If you want to create some animations on the SVG then I agree with Ryantroop. Why not just do it directly on the SVG instead of get it into canvas so you could use paper.js for no real reason? It's just adding another layer of complexity.
GSAP or KUTE.js are both great for adding complex animations to SVG's.
I originally was going to go the GSAP route; except. I want to draw the path via the SVG points, then animate it as though it's following a curve, the only solution was to use Paper.js to draw the path from the SVG points, followed by controlling that with javascript for example.
I may have thought of the only alternative, to this problem; I'm open to any feed back in the previous problem, if any feedback is available ?
It's also possible with GASP, but you'll need a Club GreenSock membership for that.
https://greensock.com/drawSVG
And if it is only linedrawing what you want to do then you can also use something like Vivus.
https://maxwellito.github.io/vivus/
Thanks for all your help, I think I may have come up with solution; why I didn't think of this a while ago.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.