Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SVG marker - can I set length and angle?

Tags:

javascript

svg

I'm trying to draw 6 sticks starting from the centre of the circle with an angle (60 degrees)

Desired ouput

What's in the picture is achieved by setting up coordinates manually. Would it be possible to use angle and length to draw these 6 sticks? If necessary, I'm willing to use a library.

<defs>
  <marker id="markerCircle" markerwidth="13" markerheight="13" refx="5" refy="7" orient="auto">
  <circle cx="7" cy="7" r="3" style="stroke: none; fill:#ef4b22;" />
  </marker>
</defs>

        <path d="M150,5 L150,55"
              style="stroke: #ef4b22; stroke-width: 2px; fill: none;
               marker-start: url(#markerCircle);" />
        <path d="M25,60 L75,95"
              style="stroke: #ef4b22; stroke-width: 2px; fill: none;
               marker-start: url(#markerCircle);" />
        <path d="M20,225 L68,200"
              style="stroke: #ef4b22; stroke-width: 2px; fill: none;
               marker-start: url(#markerCircle);" />
        <path d="M275,60 L225,95"
              style="stroke: #ef4b22; stroke-width: 2px; fill: none;
               marker-start: url(#markerCircle);" />
        <path d="M280,225 L220,200"
              style="stroke: #ef4b22; stroke-width: 2px; fill: none;
               marker-start: url(#markerCircle);" />
        <path d="M150,300 L150,250"
              style="stroke: #ef4b22; stroke-width: 2px; fill: none;
               marker-start: url(#markerCircle);" />
like image 636
Alston Sahyun Kim Avatar asked Oct 03 '15 10:10

Alston Sahyun Kim


People also ask

How does SVG path work?

The <path> element is the most powerful element in the SVG library of basic shapes. It can be used to create lines, curves, arcs, and more. Paths create complex shapes by combining multiple straight lines or curved lines. Complex shapes composed only of straight lines can be created as <polyline> s.

What is marker in SVG?

The <marker> element defines the graphic that is to be used for drawing arrowheads or polymarkers on a given <path> , <line> , <polyline> or <polygon> element. Markers are attached to shapes using the marker-start , marker-mid , and marker-end properties.

What is SVG line?

The <line> element is an SVG basic shape used to create a line connecting two points.


1 Answers

Here's a demo I made for you.

The main function used is to find a point on a circle, as below:

function findPoint(cx, cy, rad, cornerGrad){
  var cornerRad = cornerGrad * Math.PI / 180;
  var nx = Math.cos(cornerRad)*rad + cx;
  var ny = Math.sin(cornerRad)*rad + cy;
  return { x: nx, y: ny };
}
like image 63
sglazkov Avatar answered Oct 14 '22 22:10

sglazkov