SVG penskuggningsegenskaper

SVG penskuggningsegenskaper

SVG offers a wide range of pen attributes. In this chapter, we will discuss the following:

  • stroke
  • stroke-width
  • stroke-linecap
  • stroke-dasharray

All pen touch attributes can be used for any type of line, text, and element outline (such as circle).

SVG stroke egenskap

stroke Egenskapen definierar färgen på konturen för linjer, text eller element:

Detta är SVG-koden:

<svg height="80" width="300">
  <g fill="none">
    <path stroke="red" d="M5 20 l215 0" />
    <path stroke="black" d="M5 40 l215 0" />
    <path stroke="blue" d="M5 60 l215 0" />
  </g>
</svg>

Prova själv

SVG stroke-width egenskap

stroke-width Egenskapen definierar tjockleken på konturen för linjer, text eller element:

Detta är SVG-koden:

<svg height="80" width="300">
  <g fill="none" stroke="black">
    <path stroke-width="2" d="M5 20 l215 0" />
    <path stroke-width="4" d="M5 40 l215 0" />
    <path stroke-width="6" d="M5 60 l215 0" />
  </g>
</svg>

Prova själv

SVG stroke-linecap egenskap

stroke-linecap Egenskapen definierar olika typer av slutpunkter för öppna vägar:

Detta är SVG-koden:

<svg height="80" width="300">
  <g fill="none" stroke="black" stroke-width="6">
    <path stroke-linecap="butt" d="M5 20 l215 0" />
    <path stroke-linecap="round" d="M5 40 l215 0" />
    <path stroke-linecap="square" d="M5 60 l215 0" />
  </g>
</svg>

Prova själv

SVG stroke-dasharray egenskap

stroke-dasharray Egenskapen används för att skapa streck med genombrutna linjer:

Detta är SVG-koden:

<svg height="80" width="300">
  <g fill="none" stroke="black" stroke-width="4">
    <path stroke-dasharray="5,5" d="M5 20 l215 0" />
    <path stroke-dasharray="10,10" d="M5 40 l215 0" />
    <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
  </g>
</svg>

Prova själv