Vectored.Elements.Marker (Vectored v0.4.0)

The <marker> element defines graphics (like arrowheads) that can be attached to the start, middle, or end of a path or line.

Why use a Marker?

Instead of drawing an arrowhead at the end of every line manually, you define a marker once and attach it using the marker_end attribute.

Automatic Alignment: Use orient="auto" and the arrowhead will automatically rotate to point in the direction of the line.
Reusable Components: Change the marker's color or shape in one place, and every arrow in your drawing updates.
Dynamic Lines: If you move the endpoint of a line, the attached marker moves and rotates with it perfectly.

Attributes

marker_width, marker_height - The dimensions of the marker's viewport.
ref_x, ref_y - The "anchor point" of the marker. For an arrowhead, this is usually the tip.
orient - Set to "auto" to align with the line, or a fixed angle.

Examples

# Define a triangular arrowhead
arrow = Vectored.Elements.Path.new() 
|> Vectored.Elements.Path.move_to(0, 0)
|> Vectored.Elements.Path.line_to(10, 5)
|> Vectored.Elements.Path.line_to(0, 10)
|> Vectored.Elements.Path.close_path()

marker = Vectored.Elements.Marker.new()
|> Vectored.Elements.Marker.with_shape(arrow)
|> Vectored.Elements.Marker.size(10, 10)
|> Vectored.Elements.Marker.ref(10, 5) # Point is at the tip
|> Vectored.Elements.Marker.orient("auto")
|> Vectored.Elements.Marker.with_id("arrowhead")

# Use it on a line
Vectored.Elements.Line.new()
|> Vectored.Elements.Line.from(0, 0)
|> Vectored.Elements.Line.to(100, 100)
|> Vectored.Elements.Line.with_marker_end("url(#arrowhead)")

Summary

Functions

attributes(element)

attrs()

delete_dataset(elem, key)

Remove a dataset attribute

new()

Create a new marker definition.

orient(marker, orient)

Set the orientation of the marker.

put_dataset(elem, key, value)

Set a dataset attribute. Mimics the DOM Element.dataset API. The key will be converted from camelCase to kebab-case for the data-* attribute.

ref(marker, x, y)

Set the reference point (anchor point) of the marker.

rendered_key(key)

size(marker, width, height)

Set the size of the marker viewport.

with_alignment_baseline(elem, value)

Simple setter to put the value alignment-baseline onto the element

with_baseline_shift(elem, value)

Simple setter to put the value baseline-shift onto the element

with_children(elem, value)

Simple setter to put the value children onto the element

with_class(elem, value)

Simple setter to put the value class onto the element

with_clip_path(elem, value)

Simple setter to put the value clip-path onto the element

with_clip_rule(elem, value)

Simple setter to put the value clip-rule onto the element

with_color(elem, value)

Simple setter to put the value color onto the element

with_color_interpolation(elem, value)

Simple setter to put the value color-interpolation onto the element

with_color_interpolation_filters(elem, value)

Simple setter to put the value color-interpolation-filters onto the element

with_cursor(elem, value)

Simple setter to put the value cursor onto the element

with_dataset(elem, dataset)

Simple setter to put the value dataset onto the element

with_description(elem, content)

with_direction(elem, value)

Simple setter to put the value direction onto the element

with_display(elem, value)

Simple setter to put the value display onto the element

with_dominant_baseline(elem, value)

Simple setter to put the value dominant-baseline onto the element

with_fill(elem, value)

Simple setter to put the value fill onto the element

with_fill_opacity(elem, value)

Simple setter to put the value fill-opacity onto the element

with_fill_rule(elem, value)

Simple setter to put the value fill-rule onto the element

with_filter(elem, value)

Simple setter to put the value filter onto the element

with_flood_color(elem, value)

Simple setter to put the value flood-color onto the element

with_flood_opacity(elem, value)

Simple setter to put the value flood-opacity onto the element

with_font_family(elem, value)

Simple setter to put the value font-family onto the element

with_font_size(elem, value)

Simple setter to put the value font-size onto the element

with_font_size_adjust(elem, value)

Simple setter to put the value font-size-adjust onto the element

with_font_stretch(elem, value)

Simple setter to put the value font-stretch onto the element

with_font_style(elem, value)

Simple setter to put the value font-style onto the element

with_font_variant(elem, value)

Simple setter to put the value font-variant onto the element

with_font_weight(elem, value)

Simple setter to put the value font-weight onto the element

with_glyph_orientation_horizontal(elem, value)

Simple setter to put the value glyph-orientation-horizontal onto the element

with_glyph_orientation_vertical(elem, value)

Simple setter to put the value glyph-orientation-vertical onto the element

with_height(elem, value)

Simple setter to put the value height onto the element

with_href(elem, value)

Simple setter to put the value href onto the element

with_id(elem, value)

Simple setter to put the value id onto the element

with_image_rendering(elem, value)

Simple setter to put the value image-rendering onto the element

with_letter_spacing(elem, value)

Simple setter to put the value letter-spacing onto the element

with_lighting_color(elem, value)

Simple setter to put the value lighting-color onto the element

with_marker_end(elem, value)

Simple setter to put the value marker-end onto the element

with_marker_height(elem, value)

Simple setter to put the value markerHeight onto the element

with_marker_mid(elem, value)

Simple setter to put the value marker-mid onto the element

with_marker_start(elem, value)

Simple setter to put the value marker-start onto the element

with_marker_units(elem, value)

Simple setter to put the value markerUnits onto the element

with_marker_width(elem, value)

Simple setter to put the value markerWidth onto the element

with_mask(elem, value)

Simple setter to put the value mask onto the element

with_mask_type(elem, value)

Simple setter to put the value mask-type onto the element

with_opacity(elem, value)

Simple setter to put the value opacity onto the element

with_orient(elem, value)

Simple setter to put the value orient onto the element

with_overflow(elem, value)

Simple setter to put the value overflow onto the element

with_paint_order(elem, value)

Simple setter to put the value paint-order onto the element

with_pointer_events(elem, value)

Simple setter to put the value pointer-events onto the element

with_preserve_aspect_ratio(elem, value)

Simple setter to put the value preserveAspectRatio onto the element

with_ref_x(elem, value)

Simple setter to put the value refX onto the element

with_ref_y(elem, value)

Simple setter to put the value refY onto the element

with_shape(marker, shape)

Set the graphic shape to be used as the marker.

with_shape_rendering(elem, value)

Simple setter to put the value shape-rendering onto the element

with_stop_color(elem, value)

Simple setter to put the value stop-color onto the element

with_stop_opacity(elem, value)

Simple setter to put the value stop-opacity onto the element

with_stroke(elem, value)

Simple setter to put the value stroke onto the element

with_stroke_dasharray(elem, value)

Simple setter to put the value stroke-dasharray onto the element

with_stroke_dashoffset(elem, value)

Simple setter to put the value stroke-dashoffset onto the element

with_stroke_linecap(elem, value)

Simple setter to put the value stroke-linecap onto the element

with_stroke_linejoin(elem, value)

Simple setter to put the value stroke-linejoin onto the element

with_stroke_miterlimit(elem, value)

Simple setter to put the value stroke-miterlimit onto the element

with_stroke_opacity(elem, value)

Simple setter to put the value stroke-opacity onto the element

with_stroke_width(elem, value)

Simple setter to put the value stroke-width onto the element

with_style(elem, styles)

Simple setter to put the value style onto the element

with_text_anchor(elem, value)

Simple setter to put the value text-anchor onto the element

with_text_decoration(elem, value)

Simple setter to put the value text-decoration onto the element

with_text_overflow(elem, value)

Simple setter to put the value text-overflow onto the element

with_text_rendering(elem, value)

Simple setter to put the value text-rendering onto the element

with_title(elem, content)

with_transform(elem, value)

Simple setter to put the value transform onto the element

with_transform_origin(elem, value)

Simple setter to put the value transform-origin onto the element

with_unicode_bidi(elem, value)

Simple setter to put the value unicode-bidi onto the element

with_vector_effect(elem, value)

Simple setter to put the value vector-effect onto the element

with_view_box(elem, value)

Simple setter to put the value viewBox onto the element

with_view_box(elem, width, height)

with_view_box(elem, minx, miny, width, height)

with_visibility(elem, value)

Simple setter to put the value visibility onto the element

with_white_space(elem, value)

Simple setter to put the value white-space onto the element

with_width(elem, value)

Simple setter to put the value width onto the element

with_word_spacing(elem, value)

Simple setter to put the value word-spacing onto the element

with_writing_mode(elem, value)

Simple setter to put the value writing-mode onto the element

with_x(elem, value)

Simple setter to put the value x onto the element

with_y(elem, value)

Simple setter to put the value y onto the element

Types

t()

@type t() :: %Vectored.Elements.Marker{
  alignment_baseline: term(),
  baseline_shift: term(),
  children: [Vectored.Renderable.t()],
  class: term(),
  clip_path: term(),
  clip_rule: term(),
  color: term(),
  color_interpolation: term(),
  color_interpolation_filters: term(),
  cursor: term(),
  dataset: term(),
  desc: term(),
  direction: term(),
  display: term(),
  dominant_baseline: term(),
  fill: term(),
  fill_opacity: term(),
  fill_rule: term(),
  filter: term(),
  flood_color: term(),
  flood_opacity: term(),
  font_family: term(),
  font_size: term(),
  font_size_adjust: term(),
  font_stretch: term(),
  font_style: term(),
  font_variant: term(),
  font_weight: term(),
  glyph_orientation_horizontal: term(),
  glyph_orientation_vertical: term(),
  height: term(),
  href: term(),
  id: term(),
  image_rendering: term(),
  letter_spacing: term(),
  lighting_color: term(),
  marker_end: term(),
  marker_height: number(),
  marker_mid: term(),
  marker_start: term(),
  marker_units: number() | nil,
  marker_width: number(),
  mask: term(),
  mask_type: term(),
  opacity: term(),
  orient: String.t() | number(),
  overflow: term(),
  paint_order: term(),
  pointer_events: term(),
  preserve_aspect_ratio: String.t() | nil,
  ref_x: number() | String.t(),
  ref_y: number() | String.t(),
  shape_rendering: term(),
  stop_color: term(),
  stop_opacity: term(),
  stroke: term(),
  stroke_dasharray: term(),
  stroke_dashoffset: term(),
  stroke_linecap: term(),
  stroke_linejoin: term(),
  stroke_miterlimit: term(),
  stroke_opacity: term(),
  stroke_width: term(),
  style: term(),
  text_anchor: term(),
  text_decoration: term(),
  text_overflow: term(),
  text_rendering: term(),
  title: term(),
  transform: term(),
  transform_origin: term(),
  unicode_bidi: term(),
  vector_effect: term(),
  view_box: String.t() | nil,
  visibility: term(),
  white_space: term(),
  width: term(),
  word_spacing: term(),
  writing_mode: term(),
  x: term(),
  y: term()
}