Stack Overflow
Stack Overflow

Questions tagged [svg-path]

SVG element which can be used to create lines, curves, arcs and more

The element is the most powerful element in the SVG library of basic shapes. You can use it to create lines, curves, arcs and more. With paths complex shapes can be drawn by combining multiple straight lines or curved lines.

39 questions
7
votes
1 answer

Bitmap to svg path

I don't know how to make this algorithm in JavaScript/Node.js that converts bitmaps into svg paths pixel by pixel: // input 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 0 0 0 0 1 1 1 1 1 1 0 0 0 1 1 1 0 0 1 1 1 0 0 1 1 1 0 0 1 1 1…
pravdomil
  • 2,961
  • 1
  • 24
  • 38
5
votes
2 answers

can I close an SVG path without using a z parameter?

Can I just finish a path where I started it and it will be considered closed or does the Z command have to be used? For example, is this path d="M150 0 L75 200 L225 200 L150 0" stroke="black" fill="none" the same as this path d="M150 0 L75 200 L225…
Babika
  • 49
  • 1
  • 8
4
votes
2 answers

how to know if any x or y point is on svg path

i have a svg path and i want to know if my mouse is on svg path or not, if it is i want to change the cursor to mouse to pointer. This could have been easily done by adding mouse hover property on path and also with Recognize point(x,y) is inside…
shyam_
  • 2,370
  • 1
  • 27
  • 50
4
votes
4 answers

How do I get a coordinates list from an svgpathtools bezier curve?

I have python code to create a bezier curve, from which I create a bezier path. Here are my imports: import from svgpathtools import Path, Line, CubicBezier Here is my code: bezier_curve = CubicBezier(start_coordinate, control_point_1,…
Preethi Vaidyanathan
  • 1,203
  • 1
  • 12
  • 32
3
votes
2 answers

D3 Arc With Chevron Shaped End

I've drawn an arc using D3.js which by default has square shaped ends. var arc = d3.arc() .innerRadius(0) .outerRadius(100) .startAngle(0) .endAngle(Math.PI); d3.selectAll('svg') .append('path') .attr('d', function() { …
Muhammad Rehan Saeed
  • 35,627
  • 39
  • 202
  • 311
2
votes
0 answers

How to generate path out of masked SVG path?

Is there a way to generate new, stand alone path out of a path with multiple masks applied to it? I have a with multiple masks applied via wrapping parents, like so: Here is the final graphic without masks visible: DEMO on…
Sergey Lukin
  • 471
  • 2
  • 17
2
votes
1 answer

Dynamically setting a linear gradient to a Google Maps SVG path icon

I am using a custom icon for a Google Maps marker. I want to apply styling to the marker; in particular linear gradient. The xyz code below works when I run it normal as a simple HTML document, but when I try to run it in Javascript, it doesn't…
user3320795
  • 523
  • 2
  • 6
  • 17
2
votes
1 answer

How to connect dots in D3 with a line?

I've pulled out some data and after scaling, I draw a bunch of circles. This works just great. var gSet = graph1.selectAll("g").data(data).enter().append("g"); gSet.append("circle") .attr({ cx: posX, cy: posY, r: dotSize }) .attr("class",…
Konrad Viltersten
  • 36,151
  • 76
  • 250
  • 438
2
votes
3 answers

How make svg path fill as progressing animation?

Is there any solution to show the battery frame red:fill as progress filling without covering the rect ? $(document).ready( function() { $("#iambutton").click(function () { console.log("hi"); $(".mysvg").addClass( 'me' ); …
Mo.
  • 26,306
  • 36
  • 159
  • 225
1
vote
1 answer

svg path not drawing for single point on chrome surface

I have following svg in HTML, it works fine on all browser on my desktop machine. basically, it shows a point in IE, Chrome, and Firefox and this is how I want, it should display. but chrome on my surface device it's not showing the path, Please…
shyam_
  • 2,370
  • 1
  • 27
  • 50
1
vote
0 answers

How do you transition a map feature to a circle with SVG paths?

I am trying to transition between two SVG views with d3.js. The aim is to be able to alternate between displays: a classical choropleth map (map where color represents a measurement) a bubble chart where the radius is proportionate to the…
Arthur
  • 1,208
  • 13
  • 25
1
vote
1 answer

How do I get an image to properly to fill (or tile) within an SVG pattern

I have an svg that I'm creating using a layer with a transformation. I'm trying to create a pattern based on an image to fill it as background, but the background is coming out very strange: Can someone please help me figure what's going on with…
Dory Zidon
  • 10,497
  • 2
  • 25
  • 39
1
vote
0 answers

In IE11 SVG stroke-dashoffset creates "fixed" dash

This is kind of hard to explain, so I'll start by linking to a my CodePen that demonstrates the issue, and ask you to open it in IE11 to see the issue, and another browser (Chrome, for example) to see expected behavior:…
Malcalevak
  • 61
  • 5
1
vote
1 answer

JS svg painting. How to lower Lines drawing frequency(mousemove event)?

I'm writing a simple SVG drawing app, now i'm trying to optimize line drawing. The raw variant is draw every 'lineTo' on every mousemove event. It creates bad looking sharpness. Im using global variable testInt to simulate delay between lineTo's…
Stas Garcia
  • 17
  • 8
1
vote
0 answers

SVG clip-path inverse

There are solution for using clip-path and inverse area?
kicaj
  • 2,881
  • 5
  • 42
  • 68
1
2 3