svgdotjs / svg.js

The lightweight library for manipulating and animating SVG
https://svgjs.dev
Other
11.14k stars 1.08k forks source link

Best way for redraw part of picture after resize. #1113

Closed VitaliyAT closed 1 year ago

VitaliyAT commented 4 years ago

I am newbie - don't hit me a lot.

I want realize interface on svg. Lets imagine tubes connections. Each rotation it's rounded connection. This round should not be resized in any scale of picture, but tube sizes (long) can be scaled.

Redraw should happened when window resized. It can be realized by different ways. Right now it realized through JQuery $(window).resize(function() {... May be SVG.js have such event by itself?

Not familiar with all functionality of SVG.js - maybe it have some special instrument for this situation. Some mask or something that applied on part of svg picture and say "this fixed and not scalable".

What I am trying to do right now. I see that tubes draw each resize, but old one is here. I see 2 ways;

  1. Delete old geometry and redraw new - problem is that I cant find my svg element, and can't add ID for it. Have SVG.js functions for add ID in svg element?
  2. For some reasons I think that find-delete-redraw it's not the best way for realize partly scalable picture. And apologize that not only I think so. And possible that SVG.js have some functionality for it.

Thanks for read lot of letters.

  1. Found how add ID to svg. IMHO better have direct clear function like .id() for set or get ID. But any way - if I create picture like var draw = SVG(id_name); it will have id="id_name"
Fuzzyma commented 4 years ago

Found how add ID to svg. IMHO better have direct clear function like .id() for set or get ID. But any way - if I create picture like var draw = SVG(id_name); it will have id="id_name"

Thats wrong! And exactly that method exists. Please read the docs before opening an issue. I cant even tell which version you use...

Redrawing everything is not performant thats right. However, svg.js is a dom library. If you want to change something you have to do it manually.

You can listen to the window resize event with on(window, 'resize', fn)

problem is that I cant find my svg element

You can get elements with SVG(css selector) e.g. SVG('#myId')