The <circle> element is an SVG basic shape used to draw circles.
A circle is defined by its center point (cx, cy) and its radius (r).
Attributes
cx,cy- The center of the circle. If omitted, the circle's center is at the top-left (0,0) of the current coordinate system.r- The radius. This determines the size. If the SVG has aview_box, this value is relative to that coordinate system.path_length- An optional attribute to "recalibrate" the length of the circle's perimeter, useful for dashed-line animations.
Why use a Circle?
While you could draw a circle using a <path>, the <circle> element is
much easier to read, write, and manipulate programmatically when you just
need a simple round shape.
Examples
# Draws a red circle with a 40-unit radius
Vectored.Elements.Circle.new(40)
|> Vectored.Elements.Circle.with_fill("red")Summary
Functions
Set the center location of the circle.
Remove a dataset attribute
Create a new circle with a radius.
Create a new circle with a center point and radius.
Set a dataset attribute. Mimics the DOM Element.dataset API. The key will be converted from camelCase to kebab-case for the data-* attribute.
Simple setter to put the value alignment-baseline onto the element
Simple setter to put the value baseline-shift onto the element
Simple setter to put the value class onto the element
Simple setter to put the value clip-path onto the element
Simple setter to put the value clip-rule onto the element
Simple setter to put the value color onto the element
Simple setter to put the value color-interpolation onto the element
Simple setter to put the value color-interpolation-filters onto the element
Simple setter to put the value cursor onto the element
Simple setter to put the value cx onto the element
Simple setter to put the value cy onto the element
Simple setter to put the value dataset onto the element
Simple setter to put the value direction onto the element
Simple setter to put the value display onto the element
Simple setter to put the value dominant-baseline onto the element
Simple setter to put the value fill onto the element
Simple setter to put the value fill-opacity onto the element
Simple setter to put the value fill-rule onto the element
Simple setter to put the value filter onto the element
Simple setter to put the value flood-color onto the element
Simple setter to put the value flood-opacity onto the element
Simple setter to put the value font-family onto the element
Simple setter to put the value font-size onto the element
Simple setter to put the value font-size-adjust onto the element
Simple setter to put the value font-stretch onto the element
Simple setter to put the value font-style onto the element
Simple setter to put the value font-variant onto the element
Simple setter to put the value font-weight onto the element
Simple setter to put the value glyph-orientation-horizontal onto the element
Simple setter to put the value glyph-orientation-vertical onto the element
Simple setter to put the value height onto the element
Simple setter to put the value href onto the element
Simple setter to put the value id onto the element
Simple setter to put the value image-rendering onto the element
Simple setter to put the value letter-spacing onto the element
Simple setter to put the value lighting-color onto the element
Simple setter to put the value marker-end onto the element
Simple setter to put the value marker-mid onto the element
Simple setter to put the value marker-start onto the element
Simple setter to put the value mask onto the element
Simple setter to put the value mask-type onto the element
Simple setter to put the value opacity onto the element
Simple setter to put the value overflow onto the element
Simple setter to put the value paint-order onto the element
Simple setter to put the value pathLength onto the element
Simple setter to put the value pointer-events onto the element
Simple setter to put the value preserveAspectRatio onto the element
Simple setter to put the value r onto the element
Set the radius of the circle.
Simple setter to put the value shape-rendering onto the element
Simple setter to put the value stop-color onto the element
Simple setter to put the value stop-opacity onto the element
Simple setter to put the value stroke onto the element
Simple setter to put the value stroke-dasharray onto the element
Simple setter to put the value stroke-dashoffset onto the element
Simple setter to put the value stroke-linecap onto the element
Simple setter to put the value stroke-linejoin onto the element
Simple setter to put the value stroke-miterlimit onto the element
Simple setter to put the value stroke-opacity onto the element
Simple setter to put the value stroke-width onto the element
Simple setter to put the value style onto the element
Simple setter to put the value text-anchor onto the element
Simple setter to put the value text-decoration onto the element
Simple setter to put the value text-overflow onto the element
Simple setter to put the value text-rendering onto the element
Simple setter to put the value transform onto the element
Simple setter to put the value transform-origin onto the element
Simple setter to put the value unicode-bidi onto the element
Simple setter to put the value vector-effect onto the element
Simple setter to put the value viewBox onto the element
Simple setter to put the value visibility onto the element
Simple setter to put the value white-space onto the element
Simple setter to put the value width onto the element
Simple setter to put the value word-spacing onto the element
Simple setter to put the value writing-mode onto the element
Simple setter to put the value x onto the element
Simple setter to put the value y onto the element
Types
@type t() :: %Vectored.Elements.Circle{ alignment_baseline: term(), baseline_shift: term(), class: term(), clip_path: term(), clip_rule: term(), color: term(), color_interpolation: term(), color_interpolation_filters: term(), cursor: term(), cx: String.t() | number() | nil, cy: String.t() | number() | nil, 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_mid: term(), marker_start: term(), mask: term(), mask_type: term(), opacity: term(), overflow: term(), paint_order: term(), path_length: number() | nil, pointer_events: term(), preserve_aspect_ratio: term(), r: String.t() | number(), 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: term(), visibility: term(), white_space: term(), width: term(), word_spacing: term(), writing_mode: term(), x: term(), y: term() }
Functions
Set the center location of the circle.
Useful for moving a circle dynamically based on calculation or data.
Remove a dataset attribute
Create a new circle with a radius.
The center point defaults to (0,0). Use this when you plan to position
the circle later using at_location/3 or by wrapping it in a <g> with
a transform.
Create a new circle with a center point and radius.
This is the most common way to create a circle when you already know where it should sit in your coordinate system.
Set a dataset attribute. Mimics the DOM Element.dataset API. The key will be converted from camelCase to kebab-case for the data-* attribute.
Security
The key is converted to an atom at render time (required by :xmerl).
Never pass untrusted/user-derived strings as key — unbounded distinct
keys exhaust the atom table and crash the BEAM. Use static key names.
value is safe and may be dynamic.
Simple setter to put the value alignment-baseline onto the element
Simple setter to put the value baseline-shift onto the element
Simple setter to put the value class onto the element
Simple setter to put the value clip-path onto the element
Simple setter to put the value clip-rule onto the element
Simple setter to put the value color onto the element
Simple setter to put the value color-interpolation onto the element
Simple setter to put the value color-interpolation-filters onto the element
Simple setter to put the value cursor onto the element
Simple setter to put the value cx onto the element
Simple setter to put the value cy onto the element
Simple setter to put the value dataset onto the element
Simple setter to put the value direction onto the element
Simple setter to put the value display onto the element
Simple setter to put the value dominant-baseline onto the element
Simple setter to put the value fill onto the element
Simple setter to put the value fill-opacity onto the element
Simple setter to put the value fill-rule onto the element
Simple setter to put the value filter onto the element
Simple setter to put the value flood-color onto the element
Simple setter to put the value flood-opacity onto the element
Simple setter to put the value font-family onto the element
Simple setter to put the value font-size onto the element
Simple setter to put the value font-size-adjust onto the element
Simple setter to put the value font-stretch onto the element
Simple setter to put the value font-style onto the element
Simple setter to put the value font-variant onto the element
Simple setter to put the value font-weight onto the element
Simple setter to put the value glyph-orientation-horizontal onto the element
Simple setter to put the value glyph-orientation-vertical onto the element
Simple setter to put the value height onto the element
Simple setter to put the value href onto the element
Simple setter to put the value id onto the element
Simple setter to put the value image-rendering onto the element
Simple setter to put the value letter-spacing onto the element
Simple setter to put the value lighting-color onto the element
Simple setter to put the value marker-end onto the element
Simple setter to put the value marker-mid onto the element
Simple setter to put the value marker-start onto the element
Simple setter to put the value mask onto the element
Simple setter to put the value mask-type onto the element
Simple setter to put the value opacity onto the element
Simple setter to put the value overflow onto the element
Simple setter to put the value paint-order onto the element
Simple setter to put the value pathLength onto the element
Simple setter to put the value pointer-events onto the element
Simple setter to put the value preserveAspectRatio onto the element
Simple setter to put the value r onto the element
Set the radius of the circle.
Values are in user units. If your SVG view_box is 0 0 100 100,
a radius of 50 will make the circle touch the edges of the box.
Simple setter to put the value shape-rendering onto the element
Simple setter to put the value stop-color onto the element
Simple setter to put the value stop-opacity onto the element
Simple setter to put the value stroke onto the element
Simple setter to put the value stroke-dasharray onto the element
Simple setter to put the value stroke-dashoffset onto the element
Simple setter to put the value stroke-linecap onto the element
Simple setter to put the value stroke-linejoin onto the element
Simple setter to put the value stroke-miterlimit onto the element
Simple setter to put the value stroke-opacity onto the element
Simple setter to put the value stroke-width onto the element
Simple setter to put the value style onto the element
Simple setter to put the value text-anchor onto the element
Simple setter to put the value text-decoration onto the element
Simple setter to put the value text-overflow onto the element
Simple setter to put the value text-rendering onto the element
Simple setter to put the value transform onto the element
Simple setter to put the value transform-origin onto the element
Simple setter to put the value unicode-bidi onto the element
Simple setter to put the value vector-effect onto the element
Simple setter to put the value viewBox onto the element
Simple setter to put the value visibility onto the element
Simple setter to put the value white-space onto the element
Simple setter to put the value width onto the element
Simple setter to put the value word-spacing onto the element
Simple setter to put the value writing-mode onto the element
Simple setter to put the value x onto the element
Simple setter to put the value y onto the element