svg

  • class -
  • height -
  • fill - заливка
  • fill-rule -
    • nonzero -
    • evenodd -
    • inherit -
  • preserveAspectRatio -
  • stroke - обводка
  • stroke-dasharray - вид пунктирной обводки
  • stroke-dashoffset - смещениепунктирной обводки
  • stroke-linecap -
    • butt cap -
    • round cap -
    • square cap -
  • stroke-linejoin -
    • miter join -
    • round join -
    • bevel join -
  • viewBox -
  • width -
<svg
    width="500"
    height="200"
    class="brd"
    viewBox="0 0 200 200"
>
  <!--svg code-->
</svg>

circle

<circle
    cx="100"
    cy="100"
    r="50"
    style="stroke: #286D85; stroke-width: 3; fill: #3F8528;"
    />

defs

Элемент не отображается на холсте, но будет отображаться если на неё сослаться через xlink:href.

ellipse

<ellipse
    cx="150"
    cy="100"
    rx="100"
    ry="50"
    style="stroke: #286D85; stroke-width: 3; fill: #3F8528; fill-rule: nonzero;"
    />

g

Контейнер для группировки связанных графических элементов

  • id -
<g id="my_group">
    <!--svg-->
    <!--svg-->
    <!--svg-->
</g>

line

<line
    x1="10"
    y1="10"
    x2="200"
    y2="200"
    style="stroke:rgb(255,0,0);stroke-width:2"
    />

linearGradient

<linearGradient
    id="Gradient1"
    x1="0"
    y1="0"
    x2="0"
    y2="100%"
>
    <stop
        offset="0%"
        stop-color="#00F"
        />
    <stop
        offset="100%"
        stop-color="#0F0"
        />
</linearGradient>

path

Путь

polygon

<polygon
    points="300,10 350,140 60,200 100,100"
    style="fill:#408528;stroke:#286E85;stroke-width:3;fill-rule:evenodd"
    />

polyline

<polyline
    points="210,40 40,40 40,30 30,80 80,120 120,120 170,190"
    fill="white"
    fill-rule="inherit"
    stroke="#853F28"
    stroke-width="6"
    />

rect

<rect
    x="50"
    y="20"
    width="150"
    height="150"
    class="svg-rect"
    />
<rect
    x="250"
    y="20"
    rx="40"
    ry="40"
    width="150"
    height="150"
    class="svg-rect"
    style="fill-opacity:1;stroke-opacity:1;"
    fill="url(#Gradient1)"
    stroke="#333333"
    stroke-width="4px"
    />

symbols

Группирует элементы, но не отображает их, но будет отображаться если на неё сослаться через xlink:href.

text

<text
    x="20"
    y="120"
    fill="#ED6E46"
    font-size="100"
    font-family="'Arial', cursive"
>
    ilnurgi1.ru
</text>

use

<g id="my_group">
    <!--svg-->
    <!--svg-->
    <!--svg-->
</g>
<use
    x="50"
    y="50"
    xlink:href="my_group"
    />