Develop Reference

How to create multiple SVG paths in Javascript with a function

I need to create strokes similar in length but of different angles of rotations so instead of having a several redundant lines of codes, I preferred using JavaScript to that as follows;
function stroke(rot) {
var dash=document.createElementNS("http://www.w3.org/2000/svg", "path");
dash.setAttributeNS(null,"id","dash");
dash.setAttributeNS(null,"d","M 180 0 L 200 0");
dash.setAttributeNS(null,"transform","rotate(+"+rot+" 200 200)");
dash.setAttributeNS(null,"fill","none");
dash.setAttributeNS(null, "stroke","black");
dash.setAttributeNS(null, "stroke-width","5");
document.appendChild(dash);
}
for(i=0;i<360;i+=10) stroke(i);
i is the value to which the stroke will be rotated when stroke(i) will be called.
I checked a solution from here to fix my code but
unfortunately this doesn't woks, any solution to this ?

The problem is you trying to append paths into a document, not in SVG element.
const svgTarget = document.getElementById("draw");
function stroke(rot) {
let dash = document.createElementNS("http://www.w3.org/2000/svg", "path");
dash.setAttributeNS(null, "id", "dash");
dash.setAttributeNS(null, "d", "M 180 5 L 200 5");
dash.setAttributeNS(null, "transform", "rotate(+" + rot + " 200 200)");
dash.setAttributeNS(null, "fill", "none");
dash.setAttributeNS(null, "stroke", "black");
dash.setAttributeNS(null, "stroke-width", "5");
svgTarget.appendChild(dash);
}
for (i = 0; i < 360; i += 10) stroke(i);
<svg id="draw" viewBox="0 0 400 400" width="200px" height="200px"></svg>

Since a parsed <svg id="draw"> already is in the correct NameSpace;
you can add content with Strings, no need to add those <path> in the SVG NameSpace (again)
As Robert said, a <circle> with stroke-dasharray gives a better result (drawn paths are straight),
does not require JavaScript and can easily be changed.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pathLength
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray
for (i = 0; i < 360; i += 10) {
document.getElementById("draw")
.innerHTML += `<path d="M180 5L200 5"
transform="rotate(${i} 200 200)"
fill="none" stroke="black" stroke-width="5"/>`;
}
<svg id="draw" viewBox="0 0 400 400" height="180px"></svg>
<svg id="circle" viewBox="0 0 400 400" height="180px">
<circle stroke-width="5" r="197.5" fill="none" stroke="red" cx="200" cy="200"
pathLength="72" stroke-dasharray="1"/>
</svg>

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.

How to find the midPoint of arc in SVG with javascript

I want to the mid point of arc in svg.. Can any one tell formula to find the midbpoint of arc.,

The answer to that question is not straightforward. That's because in SVG arcs can be an elliptical arc. For example, what would you say is the midpoint on the following arc?
<svg width="200" height="200" viewBox="0 0 100 100">
<path fill="none" stroke="black" stroke-width="2"
d="M 20,75 A 21,50, 45, 1 1, 60,75"/>
</svg>
Anyway, without getting into complicated formulae, the simplest method is probably to take advantage of SVG's pointAtLength() method.
var myarc = document.getElementById("myarc");
// Get the length of the path
var pathLen = myarc.getTotalLength();
// How far along the path to we want the position?
var pathDistance = pathLen * 0.5;
// Get the X,Y position
var midpoint = myarc.getPointAtLength(pathDistance)
// For fun, let's add a dot at that position to mark it.
var svg = myarc.ownerSVGElement;
var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("cx", midpoint.x);
circle.setAttribute("cy", midpoint.y);
circle.setAttribute("r", "5");
circle.setAttribute("fill", "red");
svg.appendChild(circle);
<svg width="200" height="200" viewBox="0 0 100 100">
<path id="myarc" fill="none" stroke="black" stroke-width="2"
d="M 20,75 A 21,50, 45, 1 1, 60,75"/>
</svg>

IE 9 stops working when using getIntersectionList function

I have this SVG code:
<svg id="svgSurface" width="500" height="500">
<defs>
<marker id="Triangle" viewBox="0 0 20 20" refX="0" refY="0" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
<path d="M 0 0 L 20 10 L 0 20 z" fill="red" fill-opacity="1">
</path>
</marker>
</defs>
<line x1="10" y1="10" x2="100" y2="100" class="Line" marker-end="url(#Triangle)"></line>
</svg>
and some javascript code:
var svg = document.getElementById("svgSurface");
var svgRect = svg.createSVGRect();
svgRect.x = 0;
svgRect.y = 0;
svgRect.width = 50;
svgRect.height = 50;
var nodes = svg.getIntersectionList(svgRect, null);
alert(nodes.length);
Here is a working example in fiddle http://jsfiddle.net/gYaEX/1/
As you can see I try to get all nodes whose rendered content intersects the specified rectangle svgRect. In Chrome it works properly but in IE it always crashes and I don't understand why.

If it crashes that's a bug in IE which you should report to Microsoft, having said that you are using it incorrectly as you should be passing in an element and not null as the last argument. In your case you probably want this:
var nodes = svg.getIntersectionList(svgRect, svg);

Raphael JS Question

I am following a tutorial from netuts about raphael js and I dont understand one of the examples, could some one possibly explain this to me in plainer english. I know I should learn more about javascript first.
for(var i = 0; i < 5; i+=1) {
var multiplier = i*5;
paper.circle(250 + (2*multiplier), 100 + multiplier, 50 - multiplier); }
Thanks! Very Much

The code will create five circles
for(var i = 0; i < 5; i+=1) { // loop five times => create five circles
var multiplier = i*5; // multiply i to increase the effect in the next lines
paper.circle( 250 + (2*multiplier), // the x coordinate of the new circle
100 + multiplier, // the y coordinate
50 - multiplier); // the radius
}
Results in this SVG element:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="556" height="109">
<desc>Created with Raphaël</desc>
<defs/>
<circle cx="250" cy="100" r="50" fill="none" stroke="#000"/>
<circle cx="260" cy="105" r="45" fill="none" stroke="#000"/>
<circle cx="270" cy="110" r="40" fill="none" stroke="#000"/>
<circle cx="280" cy="115" r="35" fill="none" stroke="#000"/>
<circle cx="290" cy="120" r="30" fill="none" stroke="#000"/>
</svg>

for(var i = 0; i < 5; i+=1) {
Iterate 5 times. Store the number of times iterated so far in the variable i. The "{" begins the loop.
var multiplier = i * 5;
Multiply i by 5 and store in a variable called multiplier.
paper.circle(250 + (2*multiplier), 100 + multiplier, 50 - multiplier);
Draw a circle with an x coordinate at 250 plus twice the multiplier, a y coordinate at 100 plus the multiplier and with a radius of 50 minus the multiplier. (Essentially a fancy way of getting distinct circles.)
}
End the loop.