Develop Reference

SVG arc slider for range input

My goal is to design an arc slider which looks something like that
I have the following structure of the template
<svg width="500" height="300">
<path id="track" stroke="lightgrey" fill="transparent" stroke-width="20" d="
M 50 50
A 90 90 0 0 0 300 50
"/>
<path id="trackFill" fill="cyan" stroke-width="20" d="
M 50 50
A 90 90 0 0 0 [some dynamic value?] [some dynamic value?]
"/>
<circle id="knob" fill="lightblue" cx="[dynamic, initial - 50]" cy="[dynamic, initial - 50]" r="25"/>
</svg>
knob - the control which user is supposed to drag in order to change the value
track - the full arc of the slide
trackFill - the portion of the slider path before the knob
Is it possible to make trackFill cover the portion of the slider before the knob as it is being dragged along the slider curve? If so which APIs or CSS rules will help me to achieve such a result?

Is it something like this you are after?
let svg = document.getElementById("slider");
let trackFill = document.getElementById("trackFill");
let knob = document.getElementById("knob");
let isDragging = false;
let sliderDragOffset = {dx: 0, dy: 0};
let ARC_CENTRE = {x: 175, y: 50};
let ARC_RADIUS = 125;
let sliderValue = 0;
setSliderValue(sliderValue);
function setSliderValue(value)
{
// Limit value to (0..sliderMax)
let sliderMax = track.getTotalLength();
sliderValue = Math.max(0, Math.min(value, sliderMax));
// Calculate new position of knob
let knobRotation = sliderValue * Math.PI / sliderMax;
let knobX = ARC_CENTRE.x - Math.cos(knobRotation) * ARC_RADIUS;
let knobY = ARC_CENTRE.y + Math.sin(knobRotation) * ARC_RADIUS;
// Adjust trackFill dash patter to only draw the portion up to the knob position
trackFill.setAttribute("stroke-dasharray", sliderValue + " " + sliderMax);
// Update the knob position
knob.setAttribute("cx", knobX);
knob.setAttribute("cy", knobY);
}
knob.addEventListener("mousedown", evt => {
isDragging = true;
// Remember where we clicked on knob in order to allow accurate dragging
sliderDragOffset.dx = evt.offsetX - knob.cx.baseVal.value;
sliderDragOffset.dy = evt.offsetY - knob.cy.baseVal.value;
// Attach move event to svg, so that it works if you move outside knob circle
svg.addEventListener("mousemove", knobMove);
// Attach move event to window, so that it works if you move outside svg
window.addEventListener("mouseup", knobRelease);
});
function knobMove(evt)
{
// Calculate adjusted drag position
let x = evt.offsetX + sliderDragOffset.dx;
let y = evt.offsetY + sliderDragOffset.dy;
// Position relative to centre of slider arc
x -= ARC_CENTRE.x;
y -= ARC_CENTRE.y;
// Get angle of drag position relative to slider centre
let angle = Math.atan2(y, -x);
// Positions above arc centre will be negative, so handle them gracefully
// by clamping angle to the nearest end of the arc
angle = (angle < -Math.PI / 2) ? Math.PI : (angle < 0) ? 0 : angle;
// Calculate new slider value from this angle (sliderMaxLength * angle / 180deg)
setSliderValue(angle * track.getTotalLength() / Math.PI);
}
function knobRelease(evt)
{
// Cancel event handlers
svg.removeEventListener("mousemove", knobMove);
window.removeEventListener("mouseup", knobRelease);
isDragging = false;
}
<svg id="slider" width="500" height="300">
<g stroke="lightgrey">
<path id="track" fill="transparent" stroke-width="20" d="
M 50 50
A 125 125 0 0 0 300 50
"/>
</g>
<use id="trackFill" xlink:href="#track" stroke="cyan"/>
<circle id="knob" fill="lightblue" cx="50" cy="50" r="25"/>
</svg>
I've kept this code simple for clarity, but at the expense of some limitations.
It assumes there is only one slider per page. If you need more than that, you will have to keep the slider-specific values (eg sliderValue and, isDragging) separate. You could use data attributes for that. You would also need to switch from accessing the SVG elements via id attributes to another way (eg. class attributes), because id attributes must be unique on the page.

Here is a simple example:
const radius = 50;
const offsetX = 10;
const offsetY = 10;
// 0 <= pos <= 1
const setSliderPos = (svg, pos) => {
const angle = Math.PI * pos;
const x = offsetX + radius - Math.cos(angle) * radius;
const y = offsetY + Math.sin(angle) * radius;
svg.select('.knob').attr('cx', x).attr('cy', y);
svg.select('.first').attr('d', `M ${offsetX},${offsetY} A ${radius},${radius} 0 0 0 ${x},${y}`);
svg.select('.second').attr('d', `M ${x},${y} A ${radius},${radius} 0 0 0 ${offsetX + radius * 2},${offsetY}`);
}
setSliderPos(d3.select('#svg-1'), 0.3);
setSliderPos(d3.select('#svg-2'), 0.6);
setSliderPos(d3.select('#svg-3'), 1);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg id="svg-1" width="150" height="80">
<path class="first" stroke-width="5" stroke="lightblue" fill="none"/>
<path class="second" stroke-width="5" stroke="cyan" fill="none"/>
<circle class="knob" r="10" fill="lightblue"/>
</svg>
<svg id="svg-2" width="150" height="80">
<path class="first" stroke-width="5" stroke="lightblue" fill="none"/>
<path class="second" stroke-width="5" stroke="cyan" fill="none"/>
<circle class="knob" r="10" fill="lightblue"/>
</svg>
<svg id="svg-3" width="150" height="80">
<path class="first" stroke-width="5" stroke="lightblue" fill="none"/>
<path class="second" stroke-width="5" stroke="cyan" fill="none"/>
<circle class="knob" r="10" fill="lightblue"/>
</svg>

To mark the progress you can use stroke-dasharray with a percentage; for example
<g stroke="lightgrey">
<path id="track" fill="transparent" stroke-width="20"
stroke-dasharray="40% 60%"
d="M 50 50 A 125 125 0 0 0 300 50"/>
</g>
This will show 40% of the arc and hide 60% of the arc.
If you need to use two colors, for example the whole arc in grey and the progress in black, you need to use two arcs on top of one another; the one at the bottom would be the one you already have, and the one at the top would have a stroke in black and use stroke-dasharray as shown.

Add a class to specific elements with pure Javascript

I am evaluating an Svg coloring image. A function evaluates the fill colors set by the user, against a correct answers list, by looping through them with querySelectorAll method and converted (to compare their values) to arrays. Only the paths with the class setColor can be colored.
Question: How can I add the class wrongColor ONLY to the path elements that have the wrong fill color?
<!--Hypothetical SVG that must be colored correctly.-->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<path id="aSVG" class="setColor" d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="green" />
<path id="bSVG" class="setColor" d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="red" />
<path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="white" />
<path id="cSVG" class="setColor" d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="lightblue" />
<path id="dSVG" class="setColor" d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="lightblue" />
<path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="white" />
<path id="eSVG" class="setColor" d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="lightblue" />
<path id="fSVG" class="setColor" d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="lightblue" />
<path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="white" />
</svg>
<!--Correct answers list. Not visible in user-->
<ol class="answersList">
<li class="t1">red</li>
<li class="t1">green</li>
<li class="t1">lightblue</li>
<li class="t1">lightblue</li>
<li class="t1">lightblue</li>
<li class="t1">lightblue</li>
</ol>
Below is a functional example in order to clarify the functionality of the game.
#Amethystx87 Your code adds class wrongColor to all the paths with the class setColor. You can see it below in the code Snippet. The map property will create error "document.querySelectorAll(...).map is not a function" because querySelectorAll returns a Node List (array like) so you have to convert the Node List to array and then array methods can be used.
I had the same problem too and solved it as in the JavaScript code below with the comments "check users answers","check correct answers list". In the comment "Amethystx87 solution" is the way I made your code to work but not completely there yet.
#DacreDenny I couldn't utilize your solution maybe my fault. I hope the code snippet below can give you a clear view of the problem. You will see in the snippet that the wrong answers (I made the mistake on purpose) are the first two (green,red) but the correct (red, green) are as appeared in the answer list.
/*~~~~~~~~check button~~~~~~~~~~~*/
document.querySelector(".check").addEventListener('click', checkSvgAnswers);
function checkSvgAnswers() {
/*~~~check users answers~~~*/
var selectedFillColor = document.querySelectorAll(".setColor");
var selectedFillColorArray = [];
for (var i = 0; i < selectedFillColor.length; i++) {
var selectedColors = selectedFillColor[i].getAttribute('fill').toUpperCase();
selectedFillColorArray.push(selectedColors);
}
console.log(selectedFillColorArray);
/*~~~check correct answers list~~~~~~~~~~~*/
var correctAnswers = document.querySelectorAll("li.t1");
var correctAnswersArray = [];
for (var i = 0; i < correctAnswers.length; i++) {
var answerList = correctAnswers[i].innerText.toUpperCase();
correctAnswersArray.push(answerList);
}
console.log(correctAnswersArray);
/*~~~~compare answers helper function~~~~~~~~~~*/
var isEqual = function(value, other) {
// Get the value type
var type = Object.prototype.toString.call(value);
// If the two objects are not the same type, return false
if (type !== Object.prototype.toString.call(other)) {
return false;
}
// If items are not an object or array, return false
if (['[object Array]', '[object Object]'].indexOf(type) < 0) {
return false;
}
// Compare the length of the length of the two items
var valueLen = type === '[object Array]' ? value.length : Object.keys(value).length;
var otherLen = type === '[object Array]' ? other.length : Object.keys(other).length;
if (valueLen !== otherLen) {
return false;
}
// Compare two items
var compare = function(item1, item2) {
// Get the object type
var itemType = Object.prototype.toString.call(item1);
// If an object or array, compare recursively
if (['[object Array]', '[object Object]'].indexOf(itemType) >= 0) {
if (!isEqual(item1, item2)) {
return false;
}
}
// Otherwise, do a simple comparison
else {
// If the two items are not the same type, return false
if (itemType !== Object.prototype.toString.call(item2)) {
return false;
}
// Else if it's a function, convert to a string and compare
// Otherwise, just compare
if (itemType === '[object Function]') {
if (item1.toString() !== item2.toString()) {
return false;
}
} else if (item1 !== item2) {
return false;
}
}
};
// Compare properties
if (type === '[object Array]') {
for (var i = 0; i < valueLen; i++) {
if (compare(value[i], other[i]) === false) {
return false;
}
}
} else {
for (var key in value) {
if (value.hasOwnProperty(key)) {
if (compare(value[key], other[key]) === false) {
return false;
}
}
}
}
// If nothing failed, return true
return true;
};
/*~~~~~~~~compare colors~~~~~~~~~~~*/
if (isEqual(selectedFillColorArray, correctAnswersArray)) {
document.querySelector(".coloringResult").innerHTML = "<span style='color:#00B119;'>✔</span>";
} else if (!isEqual(selectedFillColorArray, correctAnswersArray)) {
document.querySelector(".coloringResult").innerHTML = "<span style='color:#D40D0D;'>✗</span>";
}
console.log(isEqual(selectedFillColorArray, correctAnswersArray));
/*~~~~~~~~Amethystx87 solution*/
document.querySelectorAll('.setColor').forEach((element) => {
if (!correctAnswersArray.includes(element.fill)) {
element.classList.add('wrongColor');
}
});
};
<!--Hypothetical color palette. User can drag and drop colors ONLY to svg paths with the class="setColor" to change the default "fill" color values-->
<div class="colorPalette">
<p>green</p>
<p>red</p>
<p>lightblue</p>
</div>
<!--Hypothetical SVG that must be colored correctly.-->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<path id="aSVG" class="setColor" d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="green" />
<path id="bSVG" class="setColor" d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="red" />
<path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="white" />
<path id="cSVG" class="setColor" d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="lightblue" />
<path id="dSVG" class="setColor" d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="lightblue" />
<path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="white" />
<path id="eSVG" class="setColor" d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="lightblue" />
<path id="fSVG" class="setColor" d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="lightblue" />
<path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="white" />
</svg>
<!--Appears on check button click showing tick for correct, x for wrong.-->
<p class="coloringResult"> </p>
<!--control buttons-->
<!--Check button: compares the users colors placed on the svg, with the correct colors from the answers list. Score container appears and shows user score-->
<button class='check' type='button'>Check</button>
<!--Try again button: keep the correct answers, the wrong answers return to the original "fill" color and the score is changed keeping only the correct colors score-->
<button class='try-again' type='button'>Try again</button>
<!--Reset button: reset exersice to original state. All svg paths to default "fill" color. Score resets to 0 and disappears from screen -->
<button class='clear-answers' type='button'>Reset</button>
<!--Correct answers list. Not visible in user-->
<ol class="answersList">
<li class="t1">red</li>
<li class="t1">green</li>
<li class="t1">lightblue</li>
<li class="t1">lightblue</li>
<li class="t1">lightblue</li>
<li class="t1">lightblue</li>
</ol>

Something like this
// Get all the correct colors and map them to an array
const correctColors = document.querySelectorAll('.t1')
.map(element => return element.textContent);
// Loop through all with class setColor and add wrongColor to the element's classList
document.querySelectorAll('.setColor').forEach((element) => {
if (!correctColors.includes(element.fill)) {
element.classList.add('wrongColor');
}
});

You can query SVG elements, and update the classlist of SVG element in the same way that you would any other element in the DOM.
So for instance, you can query all SVG elements with a fill attribute value of a "wrong fill color" of white by doing this:
const wrongFillColor = "white";
document.querySelectorAll(`svg [fill="${wrongFillColor}"]`)
You can then iterate the resulting node set, and add classes to matching elements like so:
const wrongFillColor = "white";
document.querySelectorAll(`svg [fill="${wrongFillColor}"]`).forEach(function(element) {
element.classList.add("wrongColor")
})
.wrongColor {
fill: yellow;
}
<!--Hypothetical SVG that must be colored correctly.-->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<path id="aSVG" class="setColor" d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="green" />
<path id="bSVG" class="setColor" d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="red" />
<path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="white" />
<path id="cSVG" class="setColor" d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="lightblue" />
<path id="dSVG" class="setColor" d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="lightblue" />
<path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="white" />
<path id="eSVG" class="setColor" d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="lightblue" />
<path id="fSVG" class="setColor" d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="lightblue" />
<path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="white" />
</svg>

Filling in a Bezier Curve SVG

acknowledgement: reference
[SVG] How to close the path (between the 1st and the last point) and fill the area accordingly:
It's not a single path, so i can't close it with 'Z' at the end

It's not a single path, so I can't close it with 'Z' at the end
Join the paths first.
E.g. the sample from your link is originally
<path xmlns="http://www.w3.org/2000/svg" fill="none" stroke="blue" stroke-width="8" d="M 60 60 C 111.55555555555557 160 163.11111111111114 260 220 300"/>
<path xmlns="http://www.w3.org/2000/svg" fill="none" stroke="red" stroke-width="8" d="M 220 300 C 276.88888888888886 340 339.11111111111114 320 420 300"/>
But if you append the dstring of the second to the first and replace the second M (Move) with L (LineTo), you get this:
<path xmlns="http://www.w3.org/2000/svg" fill="cyan" stroke="red" stroke-width="8" d="M 60 60 C 111.55555555555557 160 163.11111111111114 260 220 300 L 220 300 C 276.88888888888886 340 339.11111111111114 320 420 300 Z"/>
I have also set fill=cyan.
Some of these drawn things are from the linked site and not in the code in my answer.

SVG displacement map filter

I was trying to implement fisheye-esque filter in my SVG and found this codepen:
http://codepen.io/johanberonius/pen/RopjYW
It works perfectly fine except I want this effect to be slightly "harder", but I couldn't change displacement map since it generated in js.
var canvas = document.getElementById('canvas'),
barrel = document.getElementById('filter-image'),
width = canvas.width,
height = canvas.height,
ctx = canvas.getContext('2d');
for (var y = 0; y < height; y++) {
for (var x = 0; x < width; x++) {
var dx = x - 128,
dy = y - 128,
l = Math.sqrt(dx * dx + dy * dy),
a = l < 128 ? Math.asin(l/128) : 0,
z = l < 128 ? 255 - Math.cos(a) * 255 : 0,
r = l < 128 ? 128 + (dx / 128) * (z / 255) * 128 : 0,
g = l < 128 ? 128 + (dy / 128) * (z / 255) * 128 : 0,
o = l >= 124 ? Math.max(0, 1 - (l-124)/4) : 1;
ctx.fillStyle = 'rgba('+Math.floor(r)+','+Math.floor(g)+',0,'+o+')';
ctx.fillRect(x,y,1,1);
}
}
barrel.setAttribute('xlink:href', canvas.toDataURL());
var tx = 0,
ty = 0;
requestAnimationFrame(function updateAnimationFrame() {
tx += 0.027;
ty += 0.031;
barrel.setAttribute('x', 128 + Math.sin(tx) * 120);
barrel.setAttribute('y', 128 + Math.cos(ty) * 120);
requestAnimationFrame(updateAnimationFrame);
});
Formula is WAY too advanced for me to hack.
So I was wondering is there any way I can generate these types of maps or maybe someone can help me with a formula.

The displacement map could, at least roughly equivalent, be constructed as a SVG filter itself.
So you would think that you might be able to combine the drawing of the displacement map and its application to the image, in one SVG file. It turns out you can not, as browsers do not implement enable-background.
But, distributed among two files, it works. First, the displacement map:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" height="300" width="300">
<defs>
<filter id="barrel" x="-30%" y="-30%" width="160%" height="160%"
color-interpolation-filters="sRGB">
<feGaussianBlur result="result1" stdDeviation="10" />
<feMorphology operator="erode" radius="5" result="result5" />
<feColorMatrix result="result3" type="matrix"
values="0 0 0 -0.3 0.8 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 " />
<feOffset result="result4" dy="-5" dx="5" />
<feColorMatrix result="result2" in="result5" type="matrix"
values="0 0 0 0 0 0 0 0 -0.3 0.8 0 0 0 0 0 0 0 0 0 1 " />
<feOffset dy="5" dx="-5" />
<feComposite result="result6" k3="1" k2="1" operator="arithmetic" in2="result4" />
</filter>
<clipPath id="cp" clipPathUnits="userSpaceOnUse">
<circle r="100" cx="150" cy="150" />
</clipPath>
</defs>
<circle clip-path="url(#cp)" filter="url(#barrel)"
cy="150" cx="150" r="100" />
</svg>
And secondly, the application to the image:
<svg width="512" height="512" viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="barrel">
<feImage id="filter-image" xlink:href="circle.svg" result="barrel"
x="64" y="64" width="256" height="256" />
<feDisplacementMap in2="barrel" in="SourceGraphic"
xChannelSelector="R" yChannelSelector="G" scale="64" />
<feComposite operator="in" in2="barrel"/>
</filter>
</defs>
<image xlink:href="https://i.imgsafe.org/3353aef52f.jpg"
x="0" y="0" height="512" width="512"/>
<image xlink:href="https://i.imgsafe.org/3353aef52f.jpg"
x="-16" y="-16" height="512" width="512" filter="url(#barrel)"/>
</svg>
I produced this with the Inkscape Filter editor, which gives a fair grafical interface for manipulating the filter components. You should probably experiment some more. Numbers to play around with probably are:
feGaussianBlur blur radius - the width of the colored border, it would be my first candidate for what you call "sharpness"
feMorphology erode radius should probably always be half the value of the blur radius
feOffset dx/dy displace the red and green components relative to each other
feColorMatrix Those number that are not zero could be variated. Look in the filter editor for an explanation.

Is there a way to merge two path elements (svg) using Javascript?

I have drawn two path lines using SVG and I've saved these elements into two variables in my javascript code: 'Line1', and 'Line2', and I need to merge the two lines into one single path element. Is there a way to do so?

Are your paths defined relatively (small letters) or absolutely (capitals)? If absolute, joining two paths is trivial, just append the values of the d attribute. If you have two paths like this:
<path id="Line1" d="M50,50
A30,30 0 0,1 35,20
L100,100"
style="stroke:#660000; fill:none;"/>
<path id="Line2" d="M110,110
L100,0"
style="stroke:#660000; fill:none;"/>
Then this JavaScript code:
var Line1 = document.getElementById("Line1");
var Line2 = document.getElementById("Line2");
//Add paths together
Line1.setAttribute('d', Line1.getAttribute('d') + ' ' + Line2.getAttribute('d'));
//Remove unnecessary second path
Line2.parentNode.removeChild(Line2);
Will lead to you having a single path like this:
<path id="Line1" d="M50,50
A30,30 0 0,1 35,20
L100,100 M110,110
L100,0"
style="stroke:#660000; fill:none;"/>
Here's a jsFiddle, it works in Firefox 4 (needs an HTML5 parser so you can have inline SVG).
If your paths are relative then you're going to have to add something between the appended paths so that the second one starts in the correct place.

Concatenate d attributes
Usually, you can just concatenate the pathdata d attribute of several <path> elements to get a combined path.
Unfortunately, you might encounter some »bad practices« using M or m as interchangeable commands.
Common misconceptions about M or m:
M (moveto) can be absolute or relative.
Unlike the z (closepath) command (lowercase/uppercase – doesn't matter).
Relative m commands can be used used for compound paths like e.g the inner "hole" of the letter "o" referring to the previous command's end coordinate.
In fact, every first m or M command uses absolute coordinates – since there are no preceding points.
However, the first M command can be uppercase or lowercase – doesn't matter
(blame the specs)
Exception: the lowercase m command introduces a row of implicit relative l lineto commands. (But you can/should also avoid this)
Example 1: paths starting with (unnecessary) relative m command
svg{
border:1px solid #ccc;
width:25%;
}
path{
fill:#555;
}
<p>Seperate paths</p>
<svg viewBox="0 0 50 10">
<path id="path1" d="m 20 0 l 10 0 l 0 10 l -10 0z" />
<path id="path2" d="m 40 0 l 10 0 l 0 10 l -10 0z" />
<path id="path3" d="m 0 0 l 10 0 l 0 10 l -10 0z" />
</svg>
<p>Merged paths</p>
<svg viewBox="0 0 50 10">
<path id="pathConcat"
d="
m 20 0 l 10 0 l 0 10 l -10 0z
m 40 0 l 10 0 l 0 10 l -10 0z
m 0 0 l 10 0 l 0 10 l -10 0z
" />
</svg>
<p>Merged paths - fixed</p>
<svg viewBox="0 0 50 10">
<path id="pathConcat"
d="
M 20 0 l 10 0 l 0 10 l -10 0z
M 40 0 l 10 0 l 0 10 l -10 0z
M 0 0 l 10 0 l 0 10 l -10 0z
" />
</svg>
Fix: just replace each starting m with an absolute M
Example 2: m command for adjacent linetos
The exception are m commands followed by coordinates – used as a shorthand for succeeding l (relative linetos). (See also w3c specs.)
svg{
border:1px solid #ccc;
width:25%;
}
path{
fill:#555;
}
<p>Seperate paths</p>
<svg viewBox="0 0 50 10">
<path id="path1" d="m 20 0 10 0 0 10 -10 0z" />
<path id="path2" d="m 40 0 10 0 0 10 -10 0z" />
<path id="path3" d="m 0 0 10 0 0 10 -10 0z" />
</svg>
<p>Merged paths</p>
<svg viewBox="0 0 50 10">
<path id="pathConcat"
d="
m 20 0 10 0 0 10 -10 0z
m 40 0 10 0 0 10 -10 0z
m 0 0 10 0 0 10 -10 0z
" />
</svg>
<p>Merged paths - fixed</p>
<svg viewBox="0 0 50 10">
<path id="pathConcat"
d="
m 20 0 10 0 0 10 -10 0z
M 40 0 l 10 0 0 10 -10 0z
M 0 0 l 10 0 0 10 -10 0z
" />
</svg>
Fix: insert l commands
<path d="m 20 0 10 0 0 10 -10 0z" />
equals
<path d="M 20 0 l 10 0 l 0 10 l -10 0z" />
or
<path d="M 20 0 l 10 0 0 10 -10 0z" />
Example 3: fix pseudo relative m commands via getPathData()
Currently still a draft and not natively supported by major browser.
However you can use Jarek Foksa's polyfill..
getPathData() will return an array of command objects and normalize
repeated commands like this:
[
{type: 'm', values:[20, 0] },
{type: 'l', values:[10, 0]},
{type: 'l', values:[0, 10]},
{type: 'l', values:[-10, 0]}
]
function concatSimple(){
let d1= path1.getAttribute('d')
let d2= path2.getAttribute('d')
let d3= path3.getAttribute('d')
pathConcat.setAttribute('d', d1+d2)
}
function concatPathData(){
let pathData1= fixFirstM(path1.getPathData());
let pathData2= fixFirstM(path2.getPathData());
let pathData3= fixFirstM(path3.getPathData());
let pathDataConcat = pathData1.concat(pathData2).concat(pathData3);
pathConcat.setPathData(pathDataConcat);
}
// change first m to absolute M
function fixFirstM(pathData){
pathData[0].type='M';
return pathData;
}
svg{
border:1px solid #ccc;
width:25%;
}
path{
fill:#555;
}
<p><button onclick="concatSimple()">concat d simple</button>
<button onclick="concatPathData()">concat d pathData</button>
</p>
<svg viewBox="0 0 50 10">
<path id="path1" d="m 20 0 10 0 0 10 -10 0z" />
<path id="path2" d="m 40 0 10 0 0 10 -10 0z" />
<path id="path3" d="m 0 0 10 0 0 10 -10 0z" />
</svg>
<svg viewBox="0 0 50 10">
<path id="pathConcat" d="" />
</svg>
<script src="https://cdn.jsdelivr.net/npm/path-data-polyfill#1.0.4/path-data-polyfill.min.js"></script>
To fix the first relative m we can convert by changing the first command type
pathData[0].type='M';
Recommendation: only use relative m commands if they are actually relative:
if you need a shorthand for following l commands (like m 20 0 10 0 0 10 -10 0z)
for relative (subpath) starting points in compound paths – like the letter "o"
Actually merging shapes: removing overlapping shapes
If you need to merge shapes - paper.js has some powerful path operations like unite, subtract etc.
Explained here: "Merging two bezier-based shapes into one to create a new outline"