MENU
HOMEWebSVG Reference

SVG Reference

quote from:
https://www.w3schools.com/graphics/svg_reference.asp
https://developer.mozilla.org/ja/docs/Web/SVG/Attribute
https://www.oreilly.co.jp/books/9784873117973/

Element Description Attributes
<animate> Defines how an attribute of an element changes over time
  • attributeName=”the name of the target attribute”
  • by=”a relative offset value”
  • from=”the starting value”
  • to=”the ending value”
  • dur=”the duration”
  • repeatCount=”the number of time the animation will take place”
  • keyTimes=”a semicolon-separated list of time values used to control the pacing of the animation” e.g.
  • calcMode=”This attribute specifies the interpolation mode for the animation. Can be ‘discrete’, ‘linear’, ‘paced’, ‘spline'”
  • repeatDurには、反復をどれくらい長く続けるかを示す時間
  • 開始時間(begin)
  • 終了したときにどうするか(fill)
  • e.g. <animate attributeName=”x” from=”0″ to=”5″ begin=”3s” dur=”5s” fill=”freeze” />
<animateMotion> Causes a referenced element to move along a motion path
  • calcMode=”the interpolation mode for the animation. Can be ‘discrete’, ‘linear’, ‘paced’, ‘spline'”
  • path=”the motion path”
  • keyPoints=”how far along the motion path the object shall move at the moment in time”
  • rotate=”applies a rotation transformation”
  • xlink:href=”an URI reference to the element which defines the motion path”
  • e.g.
<animateTransform> Animates a transformation attribute on a target element, thereby allowing animations to control translation, scaling, rotation and/or skewing
  • by=”a relative offset value”
  • from=”the starting value”
  • to=”the ending value”
  • type=”the type of transformation which is to have its values change over time. Can be ‘translate’, ‘scale’, ‘rotate’, ‘skewX’, ‘skewY'”
<circle> Defines a circle
  • cx=”the x-axis center of the circle”
  • cy=”the y-axis center of the circle”
  • r=”The circle’s radius”. Required.
  • + presentation attributes:
    Color, FillStroke, Graphics
<g> Used to group together elements
  • id=”the name of the group”
  • fill=”the fill color for the group”
  • opacity=”the opacity for the group”
  • + presentation attributes:
    All
<rect> Defines a rectangle
  • x=”the x-axis top-left corner of the rectangle”
  • y=”the y-axis top-left corner of the rectangle”
  • rx=”the x-axis radius (to round the element)”
  • ry=”the y-axis radius (to round the element)”
  • width=”the width of the rectangle”. Required.
  • height=”the height of the rectangle” Required.
  • + presentation attributes:
    Color, FillStroke, Graphics
  • e.g. <rect x=”0″ y=”0″ width=”30″ height=”50″ />
<set> Sets the value of an attribute for a specified duration
  • e.g. <set attributeName=”visibility” attributeType=”CSS” to=”visible” begin=”4.5s” dur=”1s” fill=”freeze”/>
<svg> Creates an SVG document fragment
  • x=”top left corner when embedded (default 0)”
  • y=”top left corner when embedded (default 0)”
  • width=”the width of the svg fragment (default 100%)”
  • height=”the height of the svg fragment (default 100%)”
  • viewBox=”the points “seen” in this SVG drawing area. 4 values separated by white space or commas. (min x, min y, width, height)”
  • preserveAspectRatio=”‘none’ or any of the 9 combinations of ‘xVALYVAL’ where VAL is ‘min’, ‘mid’ or ‘max’. (default xMidYMid)”
    拡大縮小される画像の、ビューポートに対する位置揃えを指定できます。また、画像がビューポートの端に接するようにするか、あるいは切り取られるようにするかを指定できます。
  • zoomAndPan=”‘magnify’ or ‘disable’. Magnify option allows users to pan and zoom your file (default magnify)”
  • xml=”outermost element needs to setup SVG and its namespace: xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” xml:space=”preserve””
  • + presentation attributes:
    All
ページの先頭へ