osbo.com | SVG | Values | userSpaceOnUse

The userSpaceOnUse SVG value specifies the contents of the clipPath element represent values in the current user coordinate system in place at the time when the clipPath element is referenced.

userSpaceOnUse

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <clipPath clipPathUnits="userSpaceOnUse" id="myid"> <circle cx="50%" cy="50%" r="50vh"> </clipPath> <rect clip-path="url(#myid)" height="100%" width="100%"/> <image clip-path="url(#myid)" height="100%" href="/assets/svg/HappyFace.svg" width="100%" x="25%"/> </svg>

objectBoundingBox

World Wide Web Consortium (W3C)

The userSpaceOnUse SVG value specifies the coordinate system for attributes x, y, width, and height use the coordinate system in place when the filter element is referenced.

userSpaceOnUse

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <defs> <filter filterUnits="userSpaceOnUse" height="100%" id="myid" width="100%" x="0" y="0"> <feGaussianBlur stdDeviation="10"/> </filter> </defs> <circle cx="50%" cy="50%" filter="url(#myid)" r="50vh"/> </svg>

objectBoundingBox

World Wide Web Consortium (W3C)

The userSpaceOnUse SVG value specifies the coordinate system for the contents of the filter element use the coordinate system in place when the filter element is referenced.

userSpaceOnUse

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="myid" primitiveUnits="userSpaceOnUse"> <feGaussianBlur stdDeviation="10"/> </filter> </defs> <circle cx="50%" cy="50%" filter="url(#myid)" r="50vh"/> </svg>

objectBoundingBox

World Wide Web Consortium (W3C)

The userSpaceOnUse SVG value specifies the coordinate system for attributes x1, y1, x2, and y2 use the coordinate system in place when the linearGradient element is referenced.

userSpaceOnUse

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient gradientUnits="userSpaceOnUse" id="myid" x1="0%" x2="100%" y1="0%" y2="0%"> <stop/> <stop offset="50%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </linearGradient> </defs> <circle cx="0%" cy="0%" fill="url(#myid)" r="50vh"/> <circle cx="50%" cy="50%" fill="url(#myid)" r="50vh"/> <circle cx="100%" cy="100%" fill="url(#myid)" r="50vh"/> </svg>

objectBoundingBox

World Wide Web Consortium (W3C)

The userSpaceOnUse SVG value specifies attributes markerWidth, markerHeight, and the contents of the marker element have values in the current user coordinate system in place for the element referencing the marker.

userSpaceOnUse

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="0 0 1000 1000"> <defs> <marker id="myid" markerHeight="20" markerUnits="userSpaceOnUse" markerWidth="20" viewBox="-10 -10 20 20"> <polygon points="-10,-10 10,0 -10,10"/> </marker> </defs> <polyline fill="none" marker-end="url(#myid)" marker-mid="url(#myid)" marker-start="url(#myid)" points="100,100 200,200 300,100 400,200 500,100" stroke="black" vector-effect="non-scaling-stroke"/> </svg> </svg>

strokeWidth

World Wide Web Consortium (W3C)

The userSpaceOnUse SVG value specifies the coordinate system for the contents of the mask element represent values in the current user coordinate system in place at the time when the mask element is referenced.

userSpaceOnUse

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <mask id="myid" maskContentUnits="userSpaceOnUse"> <circle cx="50%" cy="50%" fill="white" r="50vh"/> </mask> <circle cx="50%" cy="50%" r="50vh"/> <rect fill="red" height="50%" mask="url(#myid)" width="50%" x="50%" y="50%"/> </svg>

objectBoundingBox

World Wide Web Consortium (W3C)

The userSpaceOnUse SVG value specifies height, width, x, and y represent values in the current user coordinate system in place at the time when the mask element is referenced.

userSpaceOnUse

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <mask height="50%" id="myid" maskUnits="userSpaceOnUse" width="50%" x="25%" y="25%"> <circle cx="50%" cy="50%" fill="white" r="50vh"/> </mask> <circle cx="50%" cy="50%" r="50vh"/> <rect fill="red" height="50%" mask="url(#myid)" width="50%" x="50%" y="50%"/> </svg>

objectBoundingBox

World Wide Web Consortium (W3C)

The userSpaceOnUse SVG value specifies the coordinate system for the contents of the pattern element use the current user coordinate system in place at the time when the pattern element is referenced.

userSpaceOnUse

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <defs> <pattern height="2%" id="myid" patternContentUnits="userSpaceOnUse" width="2%"> <path d="M5,0 L10,5 L5,10 L0,5"/> </pattern> </defs> <circle cx="50%" cy="50%" fill="url(#myid)" r="50vh"/> </svg>

objectBoundingBox

World Wide Web Consortium (W3C)

The userSpaceOnUse SVG value specifies the coordinate system for the x, y, width, and height attributes use the current user coordinate system in place at the time when the pattern element is referenced.

userSpaceOnUse

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <defs> <pattern height="2%" id="myid" patternUnits="userSpaceOnUse" width="2%"> <path d="M5,0 L10,5 L5,10 L0,5"/> </pattern> </defs> <circle cx="50%" cy="50%" fill="url(#myid)" r="50vh"/> </svg>

objectBoundingBox

World Wide Web Consortium (W3C)

The userSpaceOnUse SVG value specifies the coordinate system for attributes cx, cy, r, fx, fy, and fr use the coordinate system in place when the radialGradient element is referenced.

userSpaceOnUse

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <defs> <radialGradient cx="50%" cy="50%" fr="0%" fx="50%" fy="50%" gradientUnits="userSpaceOnUse" id="myid" r="50%"> <stop/> <stop offset="50%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </radialGradient> </defs> <circle cx="0%" cy="0%" fill="url(#myid)" r="50vh"/> <circle cx="50%" cy="50%" fill="url(#myid)" r="50vh"/> <circle cx="100%" cy="100%" fill="url(#myid)" r="50vh"/> </svg>

objectBoundingBox

World Wide Web Consortium (W3C)