Scalable Vector Graphics/Stijl: verschil tussen versies
Verwijderde inhoud Toegevoegde inhoud
Geen bewerkingssamenvatting |
++ |
||
Regel 51:
==Vorm-attributen==
===stroke-dasharray===
[[Afbeelding:Stroke-dasharray.svg|right|100px]]
Een reeks getallen, gescheiden door komma's, geeft een patroon van stippen, strepen of een combinatie daarvan aan de omlijning van elementen. De opgegeven waarden worden herhaald toegepast op de totale lengte van de lijn. De waarden op de oneven posities in het array bepalen de lengte van de zichtbare delen, de waarden op de even posities die van de niet zichtbare delen. Oneven aantallen opgegeven waarden leiden tot een afwisselend positief en negatief patroon: de inhoud van het array wordt herhaald om tot een even aantal waarden te komen. Een reeks als b.v. "20, 10, 5" wordt zodoende uitgevoerd als "20, 10, 5, 20, 10, 5".<br />
Het voorbeeld toont een lijn die bestaat uit delen van 20 pixels, telkens met onderbrekingen van
*Optioneel
*Default: 0
*Eenheid: <u>px
{{Voorbeeld|1=
<line
}}
===stroke-dashoffset===
[[Afbeelding:Stroke-dashoffset.svg|right|100px]]
Verschuift het beginpunt van een met stroke-dasharray opgegeven patroon. Negatieve waarden zijn toegestaan.
*Optioneel
*Default: 0
*Eenheid: <u>px
{{Voorbeeld|1=
<line x1="0" y1="45" x2="200" y2="45" stroke-width="6" stroke="black" stroke-dasharray="20,5" />
<line [...] stroke-dashoffset="5" />
}}
Het voorbeeld toont twee lijnen waarvan het attribuut ''stroke-dasharray'' dezelfde waarde heeft, maar bij de onderste lijn is ''stroke-dashoffset'' toegepast, met een waarde van 5. Dit heeft tot gevolg dat de lijn 5 pixels in negatieve richting verschoven is ten opzichte van het oorspronkelijke nulpunt.
===stroke-linecap===
[[Afbeelding:Stroke-linecap.svg|right|100px]]
Bepaalt de vorm van het uiteinde van een line, path of polyline.
*Optioneel
Regel 74 ⟶ 82:
**square - het einde wordt aangevuld met een rechthoek, waarvan de breedte gelijk is aan de helft van de lijndikte
*Default: butt
{{Voorbeeld|1=
<line x1="15" y1="17" x2="85" y2="17" stroke-linecap="butt" />
<line [...] stroke-linecap="round" />
<line [...] stroke-linecap="square" />
}}
Het voorbeeld toont drie lijnen met de mogelijke waarden voor ''stroke-linecap'', de stippellijntjes duiden de opgegeven begin- en eindpunten (''x1'' en ''x2'') van de lijnen aan.
===stroke-linejoin===
Regel 94 ⟶ 108:
*Optioneel
*Default: 1px
*Eenheid: <u>px
{{Voorbeeld|1=
<circle cx="100" cy="75" r="50" stroke="red" stroke-width="4" />
| |||