SVG: how to scale font sizes when scaling SVG document? - javascript

Questions like this, this, this, this, and this on SVG scaling did not help.
What's the best way to scale font sizes when scaling SVG documents?
Assume an original SVG document of 500x1000. To fit into our design viewport, we scale the document to 250x500 and allow users to do some editing like repositioning and changing text. When editing is done, we scale back to 500x1000 before exporting as a PNG image.
Currently, we manually recompute the font sizes with each scale. If the font size was 20 at the original 500x1000 size, we change the font size to 10 when scaling down to 250x500.
We're leery of using the scale transform attribute as users may reposition or rotate elements while editing the 250x500 version.
We need the 500x1000 version to look proportionally like the 250x500 version.
Is there a better way to scale font sizes? Ideally, we could use percentages for font sizes like with an element's width and height, but this doesn't work.
Or is manually computing and setting the font sizes the best way?

Using javascript you can change the font size accordingly
document.getElementById('svgID').style.fontSize = "25px";

Related

Font Size Issue in Cytoscape.js

I am using a circular layout in Cytoscape.js. I noticed that the size of nodes and font is correlated/connected to each other. Increasing the font size renders smaller node sizes (a relative view I understand). Is there a way to disconnect this relation and show increased font size without affecting the size of nodes?
I want it for all nodes (for single/ isolated events, the increase in font size doesn't affect node size, but for all nodes together, it leads to relative scaling).
You should read the article on Wikipedia for matrix transformations in graphics: https://en.wikipedia.org/wiki/Transformation_matrix
Basically, the concept of a zoom is just a stretch/scale transform. That means if you change the viewport zoom level, you scale everything. When you run a layout and fit to the viewport, you're doing an automatic pan and zoom based on the total bounding box of the elements.
Node size and label size are not at all related. You're using different zoom levels at the same time you're changing the label size, making it easy to conflate the two factors.
Just adjust your node size if you want a smaller/larger node, and just adjust your label size if you want a smaller/larger label. If you want absolute, rendered sizes you can't use zoom levels other than 1 or any fitting.

raphael js font-size auto adjust

I have a drawing that is edited in one screen - all paths drawn are saved in DB as percentage coordinates (as I know the width and height of the paper).
This is like this because I then display the same drawing in different sizes on other pages (so the percentages can easily be calculated back to real coordinates for each size).
The problem I have is I need to add text to the drawing, and as far as I know there is no way of setting the font size as a percentage it has to be in pixels.
Of course this doesn't work if I edit the drawing in a 900x500 paper then it is displayed in a 450x250 paper - I need it to automatically decrease the font size in proportion to everything else.
Difficult issue to explain - hopefully this is clear to someone
Can anyone help? any ideas for a different approach?

Make HTML canvas bigger while scaling the website

Do you have any idea how it could be possible not to scale a HTML canvas element while scaling the whole website (ctrl+"+" in most browsers) but to make its dimensions bigger? I have got an application where you can view large images, zoom and pan them in the canvas element. Now I think it would be cool to scale the website with ctrl+"+" to have more space for viewing the image. As it is by default the canvas scales, too and you gain nothing.
You can use technique described in this article http://novemberborn.net/2007/12/javascriptpage-zoom-ff3-128.
The main idea is to place any two elements and set for the first element css value in pixels like top\left\width etc and for the second element percentage value. When you scale the page the percentage value stays unchanged, but the value in pixels changes depending on zoom factor.
Based on these changes you can calculate the scale factor and multiple it with canvas dimensions to scale it.
How to calculate scale factor you can find in the demo link from article in the script block.
Something like Zoomooz.js could work - http://janne.aukia.com/zoomooz/

Raphaƫl.js: How to scale a circle's fill image to fit the circle?

I'm trying to use Raphael's VML functionality for generating a circle with an image (fix for IE8 that lacks border-radius).
My problem is that if I use
circle.attr({fill: 'url(image.jpg)'});
and my image is larger than the circle the image is only partially showed and I can't find a way to downscale the image to the diameter of the circle.
How can I do this?
Are you serious about fixing IE8 border-radius with RaphaelJS?
I would suggest something like css3pie and there is even question in SO about usage.
But still, if you want to use RaphaelJS, you will need to use Element.transform to scale your image and only afterwards, set up rounded corners effect with another element.

How to dynamically crop/scale images in a website

I need my site to be able to resize and crop an image based on the viewport on a browser. I've so far managed to dynamically resize it with an imagemap, but can't seem to crop it dynamically. I'd like it to crop and scale simultaneously without distorting an image. The image I'm using is 1920x1080 which is far bigger than most browsers so cropping the edges while scaling would make it appear similar on different browsers.
I use this jQuery plugin quite often. :)
http://srobbin.com/blog/jquery-plugins/jquery-backstretch/
It sounds like you can already detect the viewport size somehow. You just need the CSS or javascript to crop an image. In that case, I'd recommend this article:
http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image
You could
1) Use negative margins.
2) Absolute position the image in a smart way.
3) Use the CSS clip property.

Categories

Resources