SVG
patronen
Zoeken…
parameters
parameter | Beschrijving |
---|---|
patternUnits | het coördinatensysteem van de patroonkenmerken objectBoundingBox (standaard) of userSpaceOnUse |
patternContentUnits | het coördinatensysteem van de patrooninhoud objectBoundingBox of userSpaceOnUse (standaard) |
patternTransform | de transformatie die moet worden toegepast op de patrooninhoud |
X | de x-offset van het patroon (standaard is nul) |
Y | de y-offset van het patroon (standaard is nul) |
breedte | de breedte van het patroon (verplicht) |
hoogte | de hoogte van het patroon (verplicht) |
xlink: href | link naar een ander patroon dat enkele attributen of inhoud biedt |
behoud van beeldverhouding | of de beeldverhouding van het patroon behouden moet blijven |
Opmerkingen
Standaard wordt het patroon betegeld door het midden van de patrooneenheid in de linkerbovenhoek van de vorm te plaatsen.
Voorbeeldpatroon met objectBoundingBox-eenheden
<svg width="400" height="400">
<defs>
<pattern id="pattern1" width="0.2" height="0.2" patternUnits="objectBoundingBox">
<circle cx="10" cy="10" r="10" fill="#0000ff" />
</pattern>
</defs>
<rect x="10" y="10" width="100" height="100" stroke="black" fill="url(#pattern1)"/>
</svg>
Patroondekking met combinaties van patternUnits en patternContentUnits
SVG-patronen gedragen zich aanzienlijk anders dan CSS-achtergrondafbeeldingen bij het vullen van equivalente vormen. Dit kan leiden tot aanzienlijke verrassingen voor nieuwkomers bij SVG. Hieronder staan voorbeelden van een patroon dat is gedefinieerd in alle mogelijke combinaties van patternUnits en patternContentUnits - die laten zien hoe deze instellingen het vulgedrag beïnvloeden.
<svg width="800px" height="800px">
<defs>
<pattern id="pattern1" x="0" y="0" width="0.2" height="0.2" patternUnits="objectBoundingBox" patternContentUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="10" fill="blue" />
</pattern>
<pattern id="pattern2" x="10" y="10" width="20" height="20" patternUnits="userSpaceOnUse" patternContentUnits="objectBoundingBox">
<circle cx=".1" cy=".1" r="0.1" fill="blue" />
</pattern>
<pattern id="pattern3" x="10" y="10" width="20" height="20" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="10" fill="blue" />
</pattern>
<pattern id="pattern4" x="0" y="0" width="0.2" height="0.2" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox">
<circle cx=".1" cy=".1" r="0.1" fill="blue" />
</pattern>
</defs>
<rect x="10" y="10" width="100" height="100" stroke="black" fill="url(#pattern1)"/>
<rect x="150" y="10" width="200" height="150" stroke="black" fill="url(#pattern1)"/>
<text x="10" y="200">patternUnits="objectBoundingBox" (20% of shape)</text>
<text x="10" y="220">patternContentUnits="userSpaceOnUse" (20px circle) </text>
<text x="10" y="240" stroke="blue" stroke-width="1">(Units used by default)</text>
<rect x="10" y="310" width="100" height="100" stroke="black" fill="url(#pattern3)"/>
<rect x="150" y="310" width="200" height="150" stroke="black" fill="url(#pattern3)"/>
<text x="10" y="500">patternUnits="userSpaceOnUse" (10px square box)</text>
<text x="10" y="520">patternContentUnits="userSpaceOnUse" (20px circle) </text>
<rect x="410" y="10" width="100" height="100" stroke="black" fill="url(#pattern2)"/>
<rect x="550" y="10" width="200" height="150" stroke="black" fill="url(#pattern2)"/>
<text x="410" y="200">patternUnits="userSpaceOnUse" (10px square box)</text>
<text x="410" y="220">patternContentUnits="objectBoundingBox"(radius="10%") </text>
<rect x="410" y="310" width="100" height="100" stroke="black" fill="url(#pattern4)"/>
<rect x="550" y="310" width="200" height="150" stroke="black" fill="url(#pattern4)"/>
<text x="410" y="500">patternUnits="objectBoundingBox" (20% of shape)</text>
<text x="410" y="520">patternContentUnits="objectBoundingBox"(radius="10%") </text>
</svg>
patternTransform-voorbeelden
<svg width="800px" height="800px">
<defs>
<pattern id="pattern1" x="0" y="0" width="0.2" height="0.2" >
<circle cx="10" cy="10" r="10" fill="blue" />
</pattern>
<pattern id="pattern2" x="0" y="0" width="0.2" height="0.2" patternTransform="scale(1.5)">
<circle cx="10" cy="10" r="10" fill="blue" />
</pattern>
<pattern id="pattern3" x="0" y="0" width="0.2" height="0.2" patternTransform="skewX(45)">
<circle cx="10" cy="10" r="10" fill="blue" />
</pattern>
<pattern id="pattern4" x="0" y="0" width="0.2" height="0.2" patternTransform="matrix(1.5,-.70,.10,1.1,-30,10)">
<circle cx="10" cy="10" r="10" fill="blue" />
</pattern>
</defs>
<rect x="10" y="10" width="100" height="100" stroke="black" fill="url(#pattern1)"/>
<rect x="150" y="10" width="200" height="150" stroke="black" fill="url(#pattern1)"/>
<text x="10" y="200">Original</text>
<rect x="410" y="10" width="100" height="100" stroke="black" fill="url(#pattern2)"/>
<rect x="550" y="10" width="200" height="150" stroke="black" fill="url(#pattern2)"/>
<text x="410" y="200">patternTransform="scale(1.5)"</text>
<rect x="10" y="310" width="100" height="100" stroke="black" fill="url(#pattern3)"/>
<rect x="150" y="310" width="200" height="150" stroke="black" fill="url(#pattern3)"/>
<text x="10" y="500">patternTransform="skewX(45)"</text>
<rect x="410" y="310" width="100" height="100" stroke="black" fill="url(#pattern4)"/>
<rect x="550" y="310" width="200" height="150" stroke="black" fill="url(#pattern4)"/>
<text x="410" y="500">patternUnits="matrix(1.5,-.70,.10,1.1,-30,10)"</text>
</svg>
Modified text is an extract of the original Stack Overflow Documentation
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow