Transformations

library(minisvg)

Introduction

This example was taken from the tutorial on attribute transforms on MDN

• The outline of the heart is defined as a path
• The path is shown as a red outline
• A copy of this path is filled with grey and transformed to mimic a shadow

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# Define the heart shape
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
heart_shape <- stag$path(
  id="heart",
  d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
)

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# Style the heart shape to look like a shadow on the ground (using transforms)
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
heart_shadow <- stag$g(
  fill = 'grey',
  svg_prop$transform$rotate(-10, 50, 100),
  svg_prop$transform$translate(-36, 45.5),
  svg_prop$transform$skewX(40),
  svg_prop$transform$scale(1, 0.5),
  heart_shape
)

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# Style the heart shape as an outline
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
heart_outline <- stag$use(href='#heart', fill = 'none', stroke = 'red')

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# Build the SVG document with the shadow and outline
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
doc <- SVGDocument$new(
  width = 150, height = 100, viewBox = "-40 0 150 100",
  heart_shadow,
  heart_outline
)

Raw SVG Text (click to open)

<?xml version="1.0" encoding="UTF-8"?>
<svg width="150" height="100" viewBox="-40 0 150 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g fill="grey" transform="rotate(-10 50 100) translate(-36 45.5) skewX(40) scale(1 0.5)">
    <path d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" id="heart" />
  </g>
  <use href="#heart" fill="none" stroke="red" />
</svg>

Details

Unlike other attributes on SVG nodes, transformations are treated as cumulative.

For other attributes, setting a new value overwrites the old, but for transforms they are concatenated.

To reset the transforms on an element, use $reset_transform()