Scalable Vector Graphics (SVG) 1.1 (Second Edition)

SVG Basics Tutorials - Line Markers Line markers are simple shapes placed regularly along a path. This can be useful for giving directional arrows or marking distance at a set interval. If markerUnits is not specified, it defaults to "strokeWidth" This means that 1 in a marker is equivalent to the strokeWidth of the graphic that the marker is applied to. An arrow marker can be handy if you're trying to work with a fill rule the evenOdd rule is confusing. You may think, like I did, that a marker would be a great user interface element to tie some scripting behaviour to. Marker Example

The SVG marker element - SVG Tutorial SVG markers are used to mark the start, mid and end of a line or path. For instance, you can have a circle or square mark the beginning of the path, and an arrow head mark the end of the path. Table of contents: Marker Example Here is a simple visual example of how markers can look: Markers are created using the <marker> element. Here is the SVG code for the previous example: First of all, notice the <defs> element with the two <marker> elements inside. Second, notice how the <path> element references the two <marker> elements from inside its style attribute, using the marker-start and marker-end CSS properties. Defining a Marker You define a marker using the <marker> element. This example defines a marker with a width of 8 (markerWidth="8"), a height of 8 (markerHeight="8"). The id attribute of the <marker> element is used to reference this marker from <path> elements. The refx and refy coordinates sets which point inside the marker is to be used as reference point. Auto Orientation

SVG Shapes · mbostock/d3 Wiki Wiki ▸ API Reference ▸ SVG ▸ SVG Shapes SVG has a number of built-in simple shapes, such as axis-aligned rectangles and circles. For greater flexibility, you can use SVG's path element in conjunction with D3's path data generators. A shape generator, such as that returned by d3.svg.arc, is both an object and a function. SVG Elements All SVG shapes can be transformed using the transform attribute. # svg:rect x="0" y="0" width="0" height="0" rx="0" ry="0" The rect element defines an axis-aligned rectangle. # svg:circle cx="0" cy="0" r="0" The circle element defines a circle based on a center point and a radius. # svg:ellipse cx="0" cy="0" rx="0" ry="0" The ellipse element defines an axis-aligned ellipse based on a center point and two radii. # svg:line x1="0" y1="0" x2="0" y2="0" The line element defines a line segment that starts at one point and ends at another. # svg:polyline points="" The polyline element defines a set of connected straight line segments. # svg:polygon points="" # line(data)