All geek questions in one place

Raphael / SVG container scale to fit all content

I have several Raphael / SVG elements that can go beyond the border. I want to be able to automatically scale and center the SVG to display all the content.

I have partially working code that centers it appropriately, I just can't figure out how to make scaling work

Edit Now it works ... but does not center out and needs to be complemented ...

var maxValues = { x: 0, y: 0 }; var minValues = { x: 0, y: 0 }; //Find max and min points paper.forEach(function (el) { var bbox = el.getBBox(); if (bbox.y < minValues.y) minValues.y = bbox.y; if (bbox.y2 < minValues.y) minValues.y = bbox.y2; if (bbox.y > maxValues.y) maxValues.y = bbox.y; if (bbox.y2 > maxValues.y) maxValues.y = bbox.y2; if (bbox.x < minValues.x) minValues.x = bbox.x; if (bbox.x2 < minValues.x) minValues.x = bbox.x2; if (bbox.x > maxValues.x) maxValues.x = bbox.x; if (bbox.x2 > maxValues.x) maxValues.x = bbox.x2; }); var w = maxValues.x - minValues.x; var h = maxValues.y - minValues.y; console.log(minValues,maxValues,w,h) paper.setViewBox(minValues.x, minValues.y, w, h, false);
+4
source share
1 answer

I use this code snippet to center the viewport, which contains all the SVGs that I want to show almost the entire screen.

 var elmnt = $(viewport); var wdif = screen.width - width; var hdif = screen.height - height; if (wdif < hdif){ var scale = (screen.width - 50) / width; var ty = (screen.height - (height * scale)) / 2 var tx = 20; }else{ var scale = (screen.height - 50) / height; var tx = (screen.width - (width * scale)) / 2 var ty = 20; } elmnt.setAttribute("transform", "scale("+scale+") translate("+tx+","+ty+")");

What he does is use the difference between the size of the viewport and the screen size and use it as a scale. Of course, you need all the elements to be wrapped in the viewport. Hope this works for you. Bye!

EDIT

I made this fiddle ... http://jsfiddle.net/MakKZ/

In the original snippet, I used the screen size, on the violin, you will see that I am using the size of the HTML element that jsfiddle uses. No matter how many circles (or the size of the circles) you draw on the screen, you always see them all.

+1
source

Source: https://habr.com/ru/post/1433778/

More articles:


All Articles