In a recent project, I met a need to add a SVG picture that can be dragged, zoomed and edited freely on the page. In this project, I referenced two existing plug-ins. After reading the plug-ins, I would like to share with you my thoughts.
Free to drag and drop scaled nodes — React – RND
When it comes to drag and drop, our first instinct, of course, is to listen for mouse events to modify the position of a DOM element, while zooming is to modify the element’s position and width and height attributes as we manipulate the element’s boundaries. The React – Rnd plugin uses the React – Draggable and React – Resizeable plugins to drag and zoom elements.
At this point we have achieved theoretically dom elements of drag and scaling, but we soon discovered that after adding the SVG images, because the outer layer of the drag is by document. The addEventListener, but we are in the mouseDown, The location of the mouse click is actually the Document in SVG.
So what should you do at this point? The simplest idea is to take the SVG Document and put it in the parent Document.
Free SVG — react-svg
The React -svg plugin is implemented in exactly the same way as we mentioned above, and its core code is posted here for you to see:
At this point, we found that the SVG image we added can be dragged and zoomed freely. In addition, since React – SVG also provides a beforeInjection property that we can use to modify SVG’s properties (stroke, stroke-width, fill, etc.) before SVG is mounted. So we can be more flexible with our SVG images.
Scaling of SVG: Preserveaspectratio, Vector – Effect
Another problem we soon discovered was that SVG’s scaling is by default uniform, which means that when we lengthen the image horizontally, it doesn’t get bigger, it just gets horizontally centered.
At this point we need to use a property that comes with SVG: PreserveViewRatio is used to indicate whether or not uniform scaling is enforced. When set to None, SVG images do not force uniform scaling. If required, the graphic content of the specified element is scaled so that the boundary of the element exactly matches the view rectangle. The diagram below. Other types of forced scaling can be referred to MDN.
Now our SVG can scale freely, but soon we find that when we zoom in on an SVG, its line width also becomes wider, so is there any property to keep the line width the same? The answer is yes, vector-effect, This attribute is only valid for some SVG elements (
,
, < Foreignobject >,
,
,
,
, < Foreignobject >,
,
,
,
The value none specifies that the vector effect is not applied; that is, the default rendering behavior is used, which first fills the geometry of the shape with the specified painting, and then uses the specified painting stroke outline.
The value of non-scaling-stroke modifies the way strokes are performed. Typically, a stroke involves calculating the stroke outline of the shape path in the current user coordinate system and filling the outline with a stroke pigment (color or gradient). The final visual effect of this value is that the stroke width is independent of the transformation of the element (including non-uniform scaling and clipping transformations) and the scaling level.
This value specifies the particular user coordinate system used by the element and its descendants. Despite any transformation changes from the host coordinate space, the scale of the user coordinate system does not change. However, it does not specify suppression of rotation and skew. Again, it does not specify the origin of the user coordinate system. Since this value inhibits scaling of the user coordinate system, it also has the property of non-scaling-stroke.
Non-rotation This value specifies the special user coordinate system used by the element and its descendants. The rotation and tilt of the user coordinate system are suppressed despite any transformation changes from the host coordinate space. However, it does not specify to suppress scaling. Again, it does not specify the origin of the user coordinate system.
Fixed -position This value specifies the special user coordinate system used by the element and its descendants. The position of the user coordinate system is fixed despite any transformation changes from the host coordinate space. However, it does not specify suppression of rotation, skew, and scale. When both the vector effect and the transform property are specified, the transform property will be consumed by the vector effect.
When we set vector-effect=”non-scaling-stroke”, our SVG finally looked normal
The end of the
These are some of the things we learned when we tried to add an SVG image that you can drag, zoom, and edit colors to your page. I hope it helped. In addition, we still have a problem that has not been solved. If the content of path is to draw the graph by means of similar concentric circles, we do not have a good method to ensure the change of line width when scaling. If anyone has any good suggestions or methods, please contact me for communication and guidance. You can search Cao Wenliang or add my WeChat CAOWL_1013 bosom friend floor, thank you.