Develop Reference

Dynamically fill area under the polyline- svg

I am getting the points dynamically, I have to fill the area under the polyline. I have tried the fill property but that would not result in what I have expected, screenshot attached.
<svg
viewBox={`0 0 ${points.length * 10} 100`}
height="100%"
width="150px"
>
<polyline fill="rgba(0,116,217,0.5)" stroke="#0074d9" stroke-width="5" points={points} />
</svg>
the output is something like this
and I want it to be something like this
I have already tried different solutions to that, like by using a path instead of using a polyline, but It is a little bit more complex if we have dynamic co-ordinates (points).

I guess you could manually add points to your {points} list.
First point in your list should be (0,0) (as i understood that should be your bottom left).
And your last point should be (max_x, 0), here you could easily use your last point to get max_x.
Then fill should do what you expected.
EDIT: This made the top of the table colored instead of the bottom one, thanks to #Danny '365CSI' Engelman for pointing out you can simply invert that with (0,max_y) and (max_x,max_y)

As suggested by #enxaneta, you can just prepend a starting and append an end point to your array.
svg vs. cartesian coordinate system
In svg the x/y origin is in the upper left.
So you might need to flip your y coordinates as well to display your values in a cartesian coordinate system.
See also: Understanding SVG Coordinate Systems and Transformations (Part 1).
So your starting point would be:
let pointStart = [0, svgHeight];
Example
let points = [
[0, 10],
[10, 20],
[20, 50],
[30, 20],
[40, 10],
[50, 30]
];
let svgHeight=100;
let svgWidth=(points.length-1)*10;
let strokeWidth= 5;
let pointStart = [0, svgHeight];
let pointEnd = [svgWidth, svgHeight];
// convert to mathematical (cartesian) coordinate system
let pointsFlipped = points.map(val=>{return [val[0], svgHeight-val[1]] });
points = pointsFlipped;
// add points:append end, prepend start
points.push(pointEnd);
points = pointStart.concat(points);
//adjust viewBox:
svg.setAttribute('viewBox', [0, 0, svgWidth, svgHeight].join(' '));
polyline.setAttribute('points', points.join(' '));
svg{
border:1px solid red;
max-height:70vh;
width: auto;
overflow:visible;
}
polyline {
stroke-linejoin: miter;
stroke-miterlimit: 10;
paint-order: stroke;
}
<svg id="svg" viewBox="0 0 50 100" >
<polyline id="polyline" paint-order="stroke"
fill="#5cb3ff" stroke="#0074d9" stroke-width="5" />
</svg>
Besides, you might need paint-order: stroke to avoid borders around the graph.
This property will render the stroke behind the fill area. This will require to use opaque fill colors.
In the example above, I've set overflow:visible to illustrate the effect.

How to convert svg element coordinates to screen coordinates?

Is there a way to get the screen/window coordinates from a svg element ?
I have seen solutions for the other way around like:
function transformPoint(screenX, screenY) {
var p = this.node.createSVGPoint()
p.x = screenX
p.y = screenY
return p.matrixTransform(this.node.getScreenCTM().inverse())
}
But what i need in my case are the screen coordinates.
Sory if it's an obvious question, but i'm new to svg.
Thanks.

The code you included in your question converts screen coordinates to SVG coordinates. To go the other way, you have to do the opposite of what that function does.
getScreenCTM() returns the matrix that you need to convert the coordinates. Notice that the code calls inverse()? That is inverting the matrix so it does the conversion in the other direction.
So all you need to do is remove the inverse() call from that code.
var svg = document.getElementById("mysvg");
function screenToSVG(screenX, screenY) {
var p = svg.createSVGPoint()
p.x = screenX
p.y = screenY
return p.matrixTransform(svg.getScreenCTM().inverse());
}
function SVGToScreen(svgX, svgY) {
var p = svg.createSVGPoint()
p.x = svgX
p.y = svgY
return p.matrixTransform(svg.getScreenCTM());
}
var pt = screenToSVG(20, 30);
console.log("screenToSVG: ", pt);
var pt = SVGToScreen(pt.x, pt.y);
console.log("SVGToScreen: ", pt);
<svg id="mysvg" viewBox="42 100 36 40" width="100%">
</svg>

I was playing around with this snippet below when I wanted to do the same (learn which screen coordinates correspond to the SVG coordinates). I think in short this is what you need:
Learn current transformation matrix of the SVG element (which coordinates you are interested in), roughly: matrix = element.getCTM();
Then get screen position by doing, roughly: position = point.matrixTransform(matrix), where "point" is a SVGPoint.
See the snippet below. I was playing with this by changing browser window size and was altering svg coordinates to match those of the div element
// main SVG:
var rootSVG = document.getElementById("rootSVG");
// SVG element (group with rectangle inside):
var rect = document.getElementById("rect");
// SVGPoint that we create to use transformation methods:
var point = rootSVG.createSVGPoint();
// declare vars we will use below:
var matrix, position;
// this method is called by rootSVG after load:
function init() {
// first we learn current transform matrix (CTM) of the element' whose screen (not SVG) coordinates we want to learn:
matrix = rect.getCTM();
// then we "load" SVG coordinates in question into SVGPoint here:
point.x = 100; // replace this with the x co-ordinate of the path segment
point.y = 300; // replace this with the y co-ordinate of the path segment
// now position var will contain screen coordinates:
position = point.matrixTransform(matrix);
console.log(position)
// to validate that the coordinates are correct - take these x,y screen coordinates and apply to CSS #htmlRect to change left, top pixel position. You will see that the HTML div element will get placed into the top left corner of the current svg element position.
}
html, body {
margin: 0;
padding: 0;
border: 0;
overflow:hidden;
background-color: #fff;
}
svg {
position: fixed;
top:0%;
left:0%;
width:100%;
height:100%;
background:#fff;
}
#htmlRect {
width: 10px;
height: 10px;
background: green;
position: fixed;
left: 44px;
top: 132px;
}
<body>
<svg id="rootSVG" width="100%" height="100%" viewbox="0 0 480 800" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="init()">
<g id="rect">
<rect id="rectangle" x="100" y="300" width="400" height="150"/>
</g>
</svg>
<div id="htmlRect"></div>
</body>

Not sure why it hasn't been suggested before, but `Element.getBoundingClientRect() should be enough:
const {
top, // x position on viewport (window)
left, // y position on viewport (window)
} = document.querySelector('rect').getBoundingClientRect()
I think other answers might be derived from a method promoted by Craig Buckler on SitePoint, where he explains using the SVGElement API (instead of getBoudingClientRect, from the - DOM - Element API) to convert DOM to SVG coordinates and vice-versa.
But 1. only DOM coordinates are required here 2. he claims that using getBoundingClientRect when transformations (via CSS or SVG) are applied will return incorrect values to translate to SVG coordinates, but the current specification for getBoundingClientRect takes those transformations into account.
The getClientRects() method, when invoked, must return the result of the following algorithm: [...]
If the element has an associated SVG layout box return a DOMRectList object containing a single DOMRect object that describes the bounding box of the element as defined by the SVG specification, applying the transforms that apply to the element and its ancestors.
Specification: https://drafts.csswg.org/cssom-view/#extension-to-the-element-interface
Support: https://caniuse.com/#feat=getboundingclientrect

2020
⚠️ Safari currently has several bugs that make this pretty difficult if you're working with SVGs (or SVG containers) that are transitioning, rotated, or scaled.
getScreenCTM() does not include ancestor scale and rotation transforms in the returned matrix. (If your svgs are neither rotated or scaled, then this is the way to go though.)
However, if you know the ancestor elements that are being scaled and/or rotated, and their transformation values, you can manually fix the matrix provided by getScreenCTM(). The workaround will look something like this:
let ctm = ele.getScreenCTM();
// -- adjust
let ancestorScale = // track yourself or derive from window.getComputedStyle()
let ancestorRotation = // track yourself or derive from window.getComputedStyle()
ctm = ctm.scale(ancestorScale)
ctm = ctm.rotate(ancestorRotation)
// !! Note: avoid ctm.scaleSelf etc. On some systems the matrix is a true blue SVGMatrix (opposed to a DOMMatrix) and may not support these transform-in-place methods
// --
// repeat 'adjust' for each ancestor, in order from closest to furthest from ele. Mind the order of the scale/rotation transformations on each ancestor.
If you don't know the ancestors... the best I've come up with is a trek up the tree looking for transformations via getComputedStyle, which could be incredibly slow depending on the depth of the tree...
getBoundingClientRect() may return incorrect values when transitioning. If you're not animating things but you are transforming things, then this may be the way to go, though I'm pretty sure it's notably less performant than getScreenCTM. Ideally, insert a very small element into the SVG such that its bounding rect will effectively be a point.
window.getComputedStyles().transform has the same issue as above.

Playing with innerWidth, screenX, clientX etc...
I'm not sure about what you are searching for, but as you question is arround screenX, screenY and SVG, I would let you play with snippet editor and some little tries.
Note that SVG bounding box is fixed to [0, 0, 500, 200] and show with width="100%" height="100%".
The last line of tspan with print x and y of pointer when circle is clicked.
function test(e) {
var sctm=new DOMMatrix();
var invs=new DOMMatrix();
sctm=e.target.getScreenCTM();
invs=sctm.inverse();
document.getElementById("txt1").innerHTML=
sctm.a+", "+sctm.b+", "+sctm.c+", "+sctm.d+", "+sctm.e+", "+sctm.f;
document.getElementById("txt2").innerHTML=
invs.a+", "+invs.b+", "+invs.c+", "+invs.d+", "+invs.e+", "+invs.f;
document.getElementById("txt3").innerHTML=
e.screenX+", "+e.screenY+", "+e.clientX+", "+e.clientY;
var vbox=document.getElementById("svg").getAttribute('viewBox').split(" ");
var sx=1.0*innerWidth/(1.0*vbox[2]-1.0*vbox[0]);
var sy=1.0*innerHeight/(1.0*vbox[3]-1.0*vbox[0]);
var scale;
if (sy>sx) scale=sx;else scale= sy;
document.getElementById("txt4").innerHTML=
e.clientX/scale+", "+e.clientY/scale;
}
<svg id="svg" viewBox="0 0 500 200" width="100%" height="100%" >
<circle cx="25" cy="25" r="15" onclick="javascript:test(evt);" />
<text>
<tspan x="10" y="60" id="txt1">test</tspan>
<tspan x="10" y="90" id="txt2">test</tspan>
<tspan x="10" y="120" id="txt3">test</tspan>
<tspan x="10" y="150" id="txt4">test</tspan>
</text>
</svg>

Cross-browser way to force SVG fit inside div

I'm trying to fit my SVG image inside a parent container. However, I probably misunderstood something because nothing works for me.
I tried use vievBox and preserveAspectRatio but it's not effect anything. JS FIDDLE
Then I tried to write a script to transform SVG but still it's not matching viewbox perfectly JS FIDDLE 2
Somehow both examples working in Internet Explorer 11 but not in Firefox and Chrome.
HTML
<div class="svg_box">
<svg id="svg_map" viewBox="0 0 800 400" preserveAspectRatio="xMidYMid meet">
<g id="viewport">
<g id="County_fills">
<g id="wicklow">
<path d="m 660.19812,671.17693 c 4.3002,-24.4434 25.98479,-42.3466 13.668,-66.4151 3.521,-20.6076 -8.00616,-48.1039 -28.42028,-38.027 -11.84916,-7.4307 -15.52234,9.0615 -25.5361,-10.1857 -13.21206,-5.8314 -15.00724,18.141 -19.90659,23.682 -3.4252,15.0746 -22.32726,16.7667 -25.17803,34.5218 -0.30454,15.0967 8.81716,24.9106 24.882,22.849 7.57843,8.1943 17.12841,-1.2087 9.03025,18.9026 -10.09526,5.7923 -29.7139,-17.2323 -30.74574,1.6656 7.44289,0.675 23.28352,39.2398 37.71449,22.0728 5.70401,-21.6558 29.89655,-24.6066 41.068,-9.182 -0.82169,2.7052 6.39378,3.4876 3.424,0.116 z" id="path3626" />
</g>
<!-- ... other counties ... --->
</g>
</g>
</svg>
JS
$('#viewport').each(function () {
var objThs = $(this);
scaleH = $('#svg_map').innerHeight() / objThs[0].getBoundingClientRect().height;
scaleW = $('#svg_map').innerWidth() / objThs[0].getBoundingClientRect().width;
if (scaleH < scaleW) {
scale = scaleH;
}
else {
scale = scaleW;
}
centerX = parseInt($('#svg_map').innerWidth() - objThs[0].getBoundingClientRect().width * scale) / 2;
centerY = parseInt($('#svg_map').innerHeight() - objThs[0].getBoundingClientRect().height * scale) / 2;
objThs.attr('transform', "matrix(" + scale + ",0,0," + scale + "," + centerX + ","+centerY+")");
});
I will be realy happy if it's possible to do that without JS but JS is better than nothing ;-)
Any help will be appreciated.

The viewBox attribute describes the bounding box of the content of the SVG. It is used by the browser to calculate how much to scale the SVG content so it fills the SVG width and height without overflowing (depending on your preserveAspectRatio setting of course).
In your case "0 0 800 400" is wrong. It only covers a portion of the island. A more accurate value is "74 58 617 902". I got that by calling getBBox() on the "viewport" element.
See http://jsfiddle.net/2xw7vu0c/6/

How to draw non-scalable circle in SVG with Javascript

I'm developing a map, in Javascript using SVG to draw the lines.
I would like to add a feature where you can search for a road, and if the road is found, a circle appears on the map.
I know i can draw a circle in SVG, but my problem is that, the size of the circle should not change depending on the zoom-level. In other words the circle must have the same size at all times.
The roads on my map have this feature, all i had to do was add
vector-effect="non-scaling-stroke"
to the line attributes..
A line looks like this.
<line vector-effect="non-scaling-stroke" stroke-width="3" id = 'line1' x1 = '0' y1 = '0' x2 = '0' y2 = '0' style = 'stroke:rgb(255,215,0);'/>
The circle looks like this.
<circle id = "pointCircle" cx="0" cy="0" r="10" stroke="red" stroke-width="1" fill = "red"/>
Is it possible to define the circle as "non-scaling" somehow?

It took me a while, but I finally got the math clean. This solution requires three things:
Include this script in your page (along with the SVGPan.js script), e.g.
<script xlink:href="SVGPanUnscale.js"></script>
Identify the items you want not to scale (e.g. place them in a group with a special class or ID, or put a particular class on each element) and then tell the script how to find those items, e.g.
unscaleEach("g.non-scaling > *, circle.non-scaling");
Use transform="translate(…,…)" to place each element on the diagram, not cx="…" cy="…".
With just those steps, zooming and panning using SVGPan will not affect the scale (or rotation, or skew) of marked elements.
Demo: http://phrogz.net/svg/scale-independent-elements.svg
Library
// Copyright 2012 © Gavin Kistner, !#phrogz.net
// License: http://phrogz.net/JS/_ReuseLicense.txt
// Undo the scaling to selected elements inside an SVGPan viewport
function unscaleEach(selector){
if (!selector) selector = "g.non-scaling > *";
window.addEventListener('mousewheel', unzoom, false);
window.addEventListener('DOMMouseScroll', unzoom, false);
function unzoom(evt){
// getRoot is a global function exposed by SVGPan
var r = getRoot(evt.target.ownerDocument);
[].forEach.call(r.querySelectorAll(selector), unscale);
}
}
// Counteract all transforms applied above an element.
// Apply a translation to the element to have it remain at a local position
function unscale(el){
var svg = el.ownerSVGElement;
var xf = el.scaleIndependentXForm;
if (!xf){
// Keep a single transform matrix in the stack for fighting transformations
// Be sure to apply this transform after existing transforms (translate)
xf = el.scaleIndependentXForm = svg.createSVGTransform();
el.transform.baseVal.appendItem(xf);
}
var m = svg.getTransformToElement(el.parentNode);
m.e = m.f = 0; // Ignore (preserve) any translations done up to this point
xf.setMatrix(m);
}
Demo Code
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Scale-Independent Elements</title>
<style>
polyline { fill:none; stroke:#000; vector-effect:non-scaling-stroke; }
circle, polygon { fill:#ff9; stroke:#f00; opacity:0.5 }
</style>
<g id="viewport" transform="translate(500,300)">
<polyline points="-100,-50 50,75 100,50" />
<g class="non-scaling">
<circle transform="translate(-100,-50)" r="10" />
<polygon transform="translate(100,50)" points="0,-10 10,0 0,10 -10,0" />
</g>
<circle class="non-scaling" transform="translate(50,75)" r="10" />
</g>
<script xlink:href="SVGPan.js"></script>
<script xlink:href="SVGPanUnscale.js"></script>
<script>
unscaleEach("g.non-scaling > *, circle.non-scaling");
</script>
</svg>

If you are looking for a fully static way of doing this, you might be able to combine non-scaling-stroke with markers to get this, since the markers can be relative to the stroke-width.
In other words, you could wrap the circles in a <marker> element and then use those markers where you need them.
<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000">
<marker id="Triangle"
viewBox="0 0 10 10" refX="0" refY="5"
markerUnits="strokeWidth"
markerWidth="4" markerHeight="3"
orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
<path d="M 100 100 l 200 0" vector-effect="non-scaling-stroke"
fill="none" stroke="black" stroke-width="10"
marker-end="url(#Triangle)" />
<path d="M 100 200 l 200 0"
fill="none" stroke="black" stroke-width="10"
marker-end="url(#Triangle)" />
</svg>
The same can also be viewed and tweaked here. The svg spec isn't fully explicit about what should happen in this case (since markers are not in SVG Tiny 1.2, and vector-effect isn't in SVG 1.1). My current line of thinking was that it should probably affect the size of the marker, but it seems no viewers do that at the moment (try in a viewer that supports vector-effect, e.g Opera or Chrome).

Looks like some work was done in webkit (maybe related to this bug: 320635) and the new transform doesn't stick around when simply appended like that
transform.baseVal.appendItem
This seems to work better. Even works in IE 10.
EDIT: Fixed the code for more general case of multiple translate transformations in the front and possible other transformations after. First matrix transformation after all translates must be reserved for unscale though.
translate(1718.07 839.711) translate(0 0) matrix(0.287175 0 0 0.287175 0 0) rotate(45 100 100)
function unscale()
{
var xf = this.ownerSVGElement.createSVGTransform();
var m = this.ownerSVGElement.getTransformToElement(this.parentNode);
m.e = m.f = 0; // Ignore (preserve) any translations done up to this point
xf.setMatrix(m);
// Keep a single transform matrix in the stack for fighting transformations
// Be sure to apply this transform after existing transforms (translate)
var SVG_TRANSFORM_MATRIX = 1;
var SVG_TRANSFORM_TRANSLATE = 2;
var baseVal = this.transform.baseVal;
if(baseVal.numberOfItems == 0)
baseVal.appendItem(xf);
else
{
for(var i = 0; i < baseVal.numberOfItems; ++i)
{
if(baseVal.getItem(i).type == SVG_TRANSFORM_TRANSLATE && i == baseVal.numberOfItems - 1)
{
baseVal.appendItem(xf);
}
if(baseVal.getItem(i).type != SVG_TRANSFORM_TRANSLATE)
{
if(baseVal.getItem(i).type == SVG_TRANSFORM_MATRIX)
baseVal.replaceItem(xf, i);
else
baseVal.insertItemBefore(xf, i);
break;
}
}
}
}
EDIT2:
Chrome killed getTransformToElement for some reason, so the matrix needs to be retrieved manually:
var m = this.parentNode.getScreenCTM().inverse().multiply(this.ownerSVGElement.getScreenCTM());

It's discussed here and here
It looks like current browsers don't do the expected thing, so one needs to apply the inverse transform of the zoom (scale) on the contents of the <marker>, eg. transorm: scaleX(5) on the user of the <marker> etc. will need to be accompanied by a transform: translate(...) scaleX(0.2) inside the <pattern>, also factoring in possible x/y/width/height/transform-origin values inside the pattern if needed

How to know absolute position of a SVG PATH?

I have a SVG generated with InkScape, all PATHs has moveto relative position (m):
<path xmlns="http://www.w3.org/2000/svg"
style="fill: #07fe01;
fill-opacity: 1;
display: inline;
stroke-width: 4px;
cursor: auto;
stroke: none;
opacity: 0.4;
filter: none; "
d="m 431.36764,202.65372 -20.46139,7.94003 -2.875,8.84375 -3.0625,13.21875 8.8125,0.96875 13.34375,6.84375 9.94451,-6.04527 11.96344,-1.95225 -2.3183,-6.56201 0.1291,-10.53422 z"
id="Rossello"
inkscape:connector-curvature="0" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
sodipodi:nodetypes="ccccccccccc" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
transform="translate(-0.03124997,-689.42566)"
onclick="mapmed.click(this)"
onmouseover="mapmed.over(this)"
onmouseout="mapmed.out(this)">
<title id="title3042">Rosselló</title>
</path>
I need to know the absolute position of each path from javascript, but I can't.

Looks to me like normalizedPathSegList is what you want.

Try something like this:
ele=$('#Rosello')[0]
var bbox = ele.getBBox()
var top = bbox.y + bbox.y2
The same should work in x-direction.
I am not sure, but I observe that getBBox is pretty slow. So take care.

I found a way to know the absolute position. The mistake was try to find the absolute coords without apply the base layer translate and count pixes like in InkScape, from down to up, and not up to down as in SVG.
Follow this steeps to know the absolute position of the first node of a PATH in pixels:
1st get the width and height of the svg object. svgWidth, svgHeight.
2nd get the transform translate of the base layout. baseTransX, baseTransY.
3rd get the first node of the path. pathX, pathY.
4th get the transform translate of the path if exists, if not 0. pathTransX, pathTransY.
With this values, we can found absolute X and Y for the first node in InkScape:
X = baseTransX + pathTransX + pathX
Y = svgHeight - (baseTransY + pathTransY + pathY)