How can I scale an SVG coordinate system without scaling fonts? - html

Question

I'm making a data visualization like so:
and it would be convenient to use viewBox to scale the SVG so that the width of the graphic is scaled to be the width of the data range.
My data point in this example is 12,549, and so I want the range to run from 0 to 14,000, and render this in a viewBox of width 14,000 using a rect of width 12,549. In other words, to use natural units for my data.
But when I do this, the font on my axis also scales, and a 10px font also scales, and becomes so small that it can't be seen.
So what I need is a way to scale the drawing units without scaling the font units, but I can't see a way to do this.
Update
Here is the code in question:
<svg width="960" height="50" class="bullet2" style="margin-top: 10px;">
<svg viewBox="0 0 14000 25" preserveAspectRatio="none" width="100%" height="25" class="bars">
<rect x="0" y="0" width="14000" height="25" class="background"/>
<rect x="0" y="0" height="12.5" width="12549" class="item player"/>
<rect x="0" y="12.5" height="12.5" width="3750" class="item team-average"/>
<line x1="2000" x2="2000" y1="0" y2="25" class="marker" style="stroke-width: 29.1667px;"/>
</svg>
<g class="axis">
<g transform="translate(0, 25)" class="tick" style="opacity: 1;">
<line y1="0" y2="5"/>
<text text-anchor="middle" dy="1em" y="6">0</text>
</g>
<g transform="translate(140, 25)" class="tick" style="opacity: 1;">
<line y1="0" y2="5"/>
<text text-anchor="middle" dy="1em" y="6">2000</text>
</g>
<g transform="translate(280, 25)" class="tick" style="opacity: 1;">
<line y1="0" y2="5"/>
<text text-anchor="middle" dy="1em" y="6">4000</text>
</g>
<g transform="translate(420, 25)" class="tick" style="opacity: 1;">
<line y1="0" y2="5"/>
<text text-anchor="middle" dy="1em" y="6">6000</text>
</g>
<g transform="translate(560, 25)" class="tick" style="opacity: 1;">
<line y1="0" y2="5"/>
<text text-anchor="middle" dy="1em" y="6">8000</text>
</g>
<g transform="translate(700, 25)" class="tick" style="opacity: 1;">
<line y1="0" y2="5"/>
<text text-anchor="middle" dy="1em" y="6">10000</text>
</g>
<g transform="translate(840, 25)" class="tick" style="opacity: 1;">
<line y1="0" y2="5"/>
<text text-anchor="middle" dy="1em" y="6">12000</text>
</g>
<g transform="translate(980, 25)" class="tick" style="opacity: 1;">
<line y1="0" y2="5"/>
<text text-anchor="middle" dy="1em" y="6">14000</text>
</g>
</g>
</svg>
Note the viewBox on the inner svg element scaling it as described. I tried this with the same scaling on the outer svg element, which also includes the axis, but when I do this, the image looks like this:
The axis labels are there, but they are also scaled, and a 10px font out of a 14000 pixel scaling is so small that you can't see it.

Answer 1

This is my solution to your question. I recommend reading about SVGPoint and createSVGPoint. I consider especially useful the information found in this book: Using SVG with CSS3 and HTML5: Vector Graphics for Web Design
function init(){
// a function called on resize
// the function get the new font-size and set the new value of the "font-size"
let fontSize = 25;
let newSize = getValue(fontSize);
// reset the font size
theText.setAttributeNS(null,"font-size",newSize.x)
}
setTimeout(function() {
init();
addEventListener('resize', init, false);
}, 15);
// a function used to recalculate the font size on resize
function getValue(size){
var p = svg.createSVGPoint();
p.x = size;
p.y = 0;
p = p.matrixTransform(svg.getScreenCTM().inverse());
return p
}
svg{border:1px solid;}
<svg id="svg" viewBox="0 0 1000 100">
<line x1="50" x2="950" y1="50" y2="50" stroke-width="20" stroke="skyblue" />
<line x1="500" x2="500" y1="30" y2="70" stroke-width="1" stroke="#999" />
<text id="theText" dominant-baseline="middle" text-anchor="middle" x="500" y="85" font-size="16" >middle</text>
</svg>
Update
Can you explain how this solution works?
There are comments in the code. I'm also adding a quote from Using SVG with CSS3 and HTML5: Vector Graphics for Web Design:
Every SVG element that can take a transform [....] has a getScreenCTM() method. The CMT stands for cumulative transformation matrix. The screen CMT [....] defines how you can convert points in that element coordinate system back into the original, unscaled, untransformed coordinate system of the document window. It includes transformations on this element and it's ancestors plus viewBox scaling.
I hope this is useful. However I think you need to read the whole chapter 18 in the book to fully understand the code.

Answer 2

Please give a Minimal, Complete, and Verifiable example.
There are two approaches to your vague/general scaling problem:
1) Put the scaling SVG inside a container SVG? Stacking; and never scale the container which houses the fonts, relative to the percentage of the child SVG within.
2) It states here that fonts can be scaled using absolute px or relative em units. Please see here for valid length.
I do not see if the rem unit can be set, but if so, try if that works?
(I work with SVGs on occassion and CSS a lot, so there may be gaps in my suggestions)