I have SVG paths that link up to elements (a bit like a rudimentary particles.js)
Each element is draggable and when this happens the path will follow the element wherever it goes but I would like the elements to animate without having to be dragged, and for the path to keep on following in the same way.
Is this feasible.
Related
I need to render one element from an SVG to an image. It needs to be like it appears in the SVG, without further transforms.
The only way I can think of to achieve this, is to set the SVG's viewbox on the target element. To do this, I need to compute the element's bounding box relative to the SVG viewBox.
I've tried to use getBBox(), but I don't think it can work. Its coordinates are relative to the transformed element: the transforms of the element and its parents aren't applied. It's not possible to apply those transforms to the bbox since the transformed-bbox might not contain the object anymore: for example think what would happen if the bbox need to rotate by 45 degrees.
An alternative could be getBoundingClientRect(). However it represents the bounding box of the element relative to the screen coordinates and again it might not be enough to apply the transforms from the screen to the SVG viewport, since they could transform the bounding box in a way that breaks it.
The last idea I have is to create a new <svg> element (with no transform), place in it one (or more) <g> whose function is to apply all the transform from the original SVG's viewBox to the target element's, then place (a copy of) the target element into it and eventually call getBBox() on the newly created SVG element: if I'm not mistaken, the resulting bbox should be what I need and I can set it as the viewBox of the original SVG. Although it might not work if the target element contains some <use> elements or similar stuff. I think it'll take quite some time to implement this and I'm afraid it will be wasted time since it won't work for whatever reason.
Are there other ways to obtain an element's bounding box relative to the SVG viewBox? Otherwise other ways to correctly render one element from an SVG to an image?
I'm making a svg drawing app. I have a tool that allows the user to select all the shapes in a rectangular area.
I need a way to detect the svg shapes under the rectangle.
I tried to use "document.elementFromPoint" and "getIntersectionList" on my root svg element. I use a path svg object with the fillColor set to none to display a line. getIntersectionList selects the path if the area is over the invisible region, so it isn't working. "document.elementFromPoint" doesn't work if I scroll.
The only way I can think of is to generate a click event on all the pixels inside the area, and listen to that event.
How can I do that? thank you
edit:
Here's an illustration. The white square is the selection area. Items under it must be highlighted in red. The square follows the mouse. If I move the mouse away from the lines, they must turn back white
If you want to have a click events on the svg elements, I would strongly suggest checking ngx-svg library. It provides various svg elements and events on each of them. The usage is also pretty simple -
<svg-container id="test-container>
<svg-circle radius="2" (clickEvent)="doSomething($event)"></svg-circle>
</svg-container>
The events are available on all elements. Also you can customize different stuff using the library. For more information, check the documentation of the library.
Image tag has been appended inside the group tag of the svg.when the mouse is kept over the group tag and it is dragged the image inside the group tag is not shown ,it shows like a file . I want the image to be dragged not the src file of the image.
SVG is a vector graphics, an image file. Though it supports some animation using javascript, it doesn't support DOM level user interaction like dragging with mouse, unlike HTML DOM Elements.
Also to be noted, it is rendered with the help of CPU and is CPU intensive work, so I don't think dragging group tag insige an SVG is a good idea.
One last thing to be noted, SVG support may vary browser-wise. So, to make your work consistent among the browsers will be a tricky part.
I'm trying to write something that draws on an image. I have a flow chart that's in a .png and I want to draw a circle around a specific step in the chart based on the page that the user is on. I would normally just head for HTML5 and use the <canvas> element, but it has to work on IE8, which doesn't support <canvas>. I can use jQuery, but that's the only external library that I can use. Also, the user can scroll up and down the page, so things that I've seen that use absolute positioning end up looking bad since I don't always want the image there. Any tips? Thanks.
How about a DIV containing the flowchart as a background image with another image (which would be a transparent circle outline image) sitting inside the DIV, positioned absolutely (relative to it's parent DIV) which is moved to the correct position within the div based on which page the user is on. Should be simple enough to do.
i have build a little glow filter in the defs section of a svg snippet in my html page. That filter has an animation inside, that makes that filter slowly fade.
Now i assign that filter to some svg element, let's say, a rectangle. so far so good, works nice.
Problem, the animation starts right away, but i want to control, when it starts, like when i call a specific function in javascript.
Now i thought, i set the begin of the animation to "indefinite" and then call beginElement() on the animation. But how do i access the animation dom element within the filter, which is assigned to my svg rectangle via url("#myFilterID") ?
Give it an id attribute and then call document.getElementById to retrieve it is probably easiest.