I noticed the the root coordinates for a text element are not at the top left corner like a rect element:
Is there a way to set it such that when a text element is at (0,0), it fits inside the parent element?
If I understood you well, you can use this:
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dominant-baseline
A) Chromium browsers
svg {
dominant-baseline: hanging;
}
https://jsfiddle.net/e7vc4bqj/
B) Chromium and Firefox
.text {
dominant-baseline: hanging;
}
https://jsfiddle.net/3zskd148/
SVG text coordinates are used to define its left bottom corner by default:
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor
Hope this help :)
Why are the SVG Text elements too high?
The x and y coordinates of a <text> element specify the start of the baseline of the text. This makes complete sense. You wouldn't want it to be the top left of the first character - because it would then be a difficult job to get text of different sizes and styles to line up.
There is no global option in SVG that changes that behaviour. However see below for alternatives)
Is there a way to set it such that when a text element is at (0,0), it fits inside the parent element?
Normally you would just adjust the y coordinate based on the font size.
However there are a couple of alternatives you can use:
One is the xxx-baseline properties (as #gengns has pointed out), that can alter how the character glyphs are positioned relative to the baseline. Note however, that those attributes are not entirely reliable, due to mixed browser support. Plus they depend on the font containing the correct data tables. Not all fonts have those tables.
A better option IMO is to use the dy attribute. This adds a relative offset to the text position. Meaning the text is actually positioned at (x, y + dy). And it is supported by all browsers.
<svg width="200" height="150">
<rect x="0" y="0" width="200" height="150" fill="skyblue"/>
<text x="0" y="0"
font-size="25px" dy="1em">asd</text>
</svg>
I have a number of shapes that I want to display browser tooltips when I hover over them. However, because they contain images and caption texts, it means duplicating the same tooltip on each of their contents because they are higher in the Z-Order than the shape.
I was hoping to put them in a <defs> so that I could re-use them. For instance:
<defs>
<title id='t1'>This is my tooltip</title>
</defs>
<image ...etc...>
<use xlink:href="#t1"/>
</image>
but this doesn't work. Although it sounds like a fairly obvious use-case, I'm guessing that defs only helps with graphic elements. Is that true? Is there another way I can do this?
Having the same tooltip for my rectangle captions (or any text) is unnecessary if I include the CSS text { pointer-events: none; }.
Duplicating the tooltip across the combined shapes can be done by putting a transparent rectangle over them all and giving that a (single instance) tooltip.
There are many forms of this question on SO but none of them seem to cover this simple case: I have 2 lines in an SVG and they are drawn with different stroke widths. I've tried multiple tricks from the other posts but nothing seems to work. There is something simple here that I'm missing.
Here is the simplest form of this bug I can reproduce:
<!DOCTYPE html>
<html>
<body>
<svg width="120px" height="410px" viewBox="0 0 120 410">
<g id="rooms" stroke-width="8" stroke="#979797">
<path d="M0,0 L40,0"></path>
<path d="M0,20 L40,20"></path>
</g>
</svg>
</body>
</html>
And here is the drawing result:
I've also created a fiddle, trying to use the other SO articles suggestions, with no effect. I've also tested this in Safari, Chrome, and Firefox and all have the same result.
I'm a little stunned that such a simple thing has this type of drawing bug. I must be missing something very obvious. In the fiddle I also try using LINE instead of PATH and that DOES work properly. This appears to be related to paths.
OK, this was indeed a noob mistake. It wasn't clear that the width of a stoke is centered on the line. All paths drawn along the edge of my viewBox were effectively clipped.
TL;DR: Don't draw from 0,0
I'm trying to have a SVG path scale to fit the entire container element, without stretching or being trimmed. The SVG is the one below. As you can see, it's a simple border.
<svg preserveAspectRatio="none" viewBox="0 0 370 80" height="100%" width="100%">
<path vector-effect="non-scaling-stroke" d="M359,70C359,70,300,70,185,70C84,70,9,70,9,70C9,70,9,60,9,40C9,24,9,10,9,10C9,10,84,10,185,10C300,10,359,10,359,10C359,10,359,24,359,40C359,60,359,70,359,70C359,70,359,70,359,70"/>
</svg>
Then I have an element that could have different sizes, because it's responsive and because I use it in various cases where width or height can be different. I can't succeed in having the SVG that expands its path by always staying inside the viewport, but scaling without preserving aspect ratio. It doesn't seem a difficult logical thing to do, but I tried various options without success.
EDIT
I was able to scale this SVG, by setting whatever dimensions I wanted. Why does the first not work, but this works instead?
<svg preserveAspectRatio="none" viewBox="0 0 404 77" height="100%" width="100%">
<path vector-effect="non-scaling-stroke" d="m0,0l404,0l0,77l-404,0l0,-77z"/>
</svg>
The short answer is no. What you want to do (as I understand it) is not possible. In SVG you can scale to fit the container (using constant aspect ratio), or you can stretch (ignoring aspect ratio).
There is no way currently to keep some parts of the SVG static and stretch other parts. Unless, of course, you use Javascript to manipulate the contents of the SVG.
What you may want to do is consider using an SVG as the source image for a CSS border-image (see http://www.w3.org/TR/css3-background/#border-images). Perhaps that is the sort of thing you were after?
I am viewing the following svg http://pastebin.com/pNdNEQ6z in my Firefox and chome.
Can someone tell me why the two graphs are somewhere in der middle of y an not starting at the top? If you change the viewbox to "0 200 650 800" everything is fine. why 200? I have played with preserveAspectRatio="xMidYMin" but this is not doing anything.
At the end of the day I want to display both charts completely visible starting at the top? And I would like to understand why it is not doing so right now :-)
Your problem is that you had a typo on your first embedded <svg> element (you had hight="400" instead of height="400") and were not using a …YMin alignment on the outer.
Fixed, it looks like this:
<svg … preserveAspectRatio="xMidYMin">
<svg … height="400">
Demo: http://jsfiddle.net/WAVZj/