osbo.com | SVG | Attributes | x

The x SVG attribute specifies the x location for the light source.

<number>

0

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="myid"> <feDiffuseLighting> <fePointLight x="100" z="10"/> </feDiffuseLighting> </filter> </defs> <rect height="100%" filter="url(#myid)" width="100%"/> <circle cx="50%" cy="50%" filter="url(#myid)" r="50vh"/> </svg>

y

z

World Wide Web Consortium (W3C)

The x SVG attribute specifies the x location for the light source.

<number>

0

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="myid"> <feDiffuseLighting> <feSpotLight x="100" z="10"/> </feDiffuseLighting> </filter> </defs> <rect height="100%" filter="url(#myid)" width="100%"/> <circle cx="50%" cy="50%" filter="url(#myid)" r="50vh"/> </svg>

limitingConeAngle

pointsAtX

pointsAtY

pointsAtZ

specularExponent

y

z

World Wide Web Consortium (W3C)

The x SVG attribute specifies the x-coordinate of the element.

<length-percentage>

-10%

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

filterUnits

height

primitiveUnits

width

y

World Wide Web Consortium (W3C)

The x SVG attribute specifies the x-coordinate of the element.

<length-percentage>

0

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <style> foreignObject { background-color: yellow; height: 50%; width: 50%; } foreignObject:nth-of-type(2) { y: 50%; } </style> <foreignObject x="50"> <div xmlns="http://www.w3.org/1999/xhtml">XHTML in SVG</div> </foreignObject> <foreignObject x="50%"> <div xmlns="http://www.w3.org/1999/xhtml">XHTML in SVG</div> </foreignObject> </svg>

height

width

y

World Wide Web Consortium (W3C)

The x SVG attribute specifies the x-coordinate of the element.

<length-percentage>

0

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <image href="/assets/svg/HappyFace.svg" x="50"/> <image href="/assets/svg/HappyFace.svg" x="50%"/> </svg>

crossorigin

height

href

preserveAspectRatio

width

y

World Wide Web Consortium (W3C)

The x SVG attribute specifies the x-axis coordinate of one corner of the rectangle for the largest possible offscreen buffer.

<length-percentage>

-10%

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <linearGradient id="myid1"> <stop/> <stop offset="100%" stop-color="red"/> </linearGradient> <mask id="myid2" width="0.5" x="0"> <svg viewBox="0 0 48 48"> <path d="M24,0 A24,24,0,0,1,24,48 A24,24,0,0,1,24,0 M16,12 A4,4,0,0,0,16,20 A4,4,0,0,0,16,12 M32,12 A4,4,0,0,0,32,20 A4,4,0,0,0,32,12 M8,24 A16,16,0,0,0,40,24 V28 H8" fill="white"/> </svg> </mask> <mask id="myid3" width="50%" x="50%"> <rect fill="white" height="100%" width="100%"/> <svg viewBox="0 0 48 48"> <path d="M24,0 A24,24,0,0,1,24,48 A24,24,0,0,1,24,0 M16,12 A4,4,0,0,0,16,20 A4,4,0,0,0,16,12 M32,12 A4,4,0,0,0,32,20 A4,4,0,0,0,32,12 M8,24 A16,16,0,0,0,40,24 V28 H8"/> </svg> </mask> <rect fill="url(#myid1)" height="100%" mask="url(#myid2)" width="100%"/> <rect fill="url(#myid1)" height="100%" mask="url(#myid3)" width="100%"/> </svg>

height

maskContentUnits

maskUnits

width

y

World Wide Web Consortium (W3C)

The x SVG attribute specifies the x-coordinate of the pattern.

<length-percentage>

0

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

height

href

patternContentUnits

patternTransform

patternUnits

viewBox

width

y

World Wide Web Consortium (W3C)

The x SVG attribute specifies the x-coordinate of the element.

<length-percentage>

0

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <style> rect { height: 100; width: 100; } rect:nth-of-type(2) { fill: red; } </style> <rect x="50"/> <rect x="50%"/> </svg>

height

pathLength

rx

ry

width

y

World Wide Web Consortium (W3C)

The x SVG attribute specifies the x-coordinate of the element.

Setting the outer svg element will have no effect.

<length-percentage>

0

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <rect height="100%" width="100%"/> <svg fill="blue" x="50"> <rect height="100%" width="100%"/> </svg> <svg fill="red" x="50%"> <rect height="100%" width="100%"/> </svg> </svg>

height

preserveAspectRatio

transform

viewBox

width

y

zoomAndPan

World Wide Web Consortium (W3C)

The x SVG attribute specifies the x-coordinate of the element.

<length-percentage>

0

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <symbol id="myid1" x="50%"> <circle cx="50%" cy="50%" r="50vh"/> </symbol> <symbol id="myid2" x="50"> <circle cx="50" cy="50" r="50"/> </symbol> <use href="#myid1"/> <use fill="red" href="#myid1" y="100vh"/> <use fill="blue" href="#myid1" y="200vh"/> <use href="#myid2"/> <use fill="red" href="#myid2" y="100"/> <use fill="blue" href="#myid2" y="200"/> </svg>

height

preserveAspectRatio

refX

refY

viewBox

width

y

World Wide Web Consortium (W3C)

The x SVG attribute specifies the x-coordinate of the current text position.

[ [ <length-percentage> | <number> ]+ ]#

0

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <text x="100 200 300 400" y="11">text</text> <text x="10% 20% 30% 40%" y="10%">text</text> </svg>

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <text x="1e2 2e2 3e2 4e2" y="1.1e1">text</text> </svg>

dx

dy

lengthAdjust

rotate

textLength

y

World Wide Web Consortium (W3C)

The x SVG attribute specifies the x-coordinate of the current text position.

[ [ <length-percentage> | <number> ]+ ]#

(none)

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <text y="11">text <tspan x="100 200 300 400 500">tspan</tspan> text</text> <text y="10%">text <tspan x="10% 20% 30% 40% 50%">tspan</tspan> text</text> </svg>

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <text y="1.1e1">text <tspan x="1e2 2e2 3e2 4e2 5e2">tspan</tspan> text</text> </svg>

dx

dy

lengthAdjust

rotate

textLength

y

World Wide Web Consortium (W3C)

The x SVG attribute specifies the x-coordinate of the element.

<length-percentage>

0

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <rect height="100" id="myid" width="100"/> <use fill="red" href="#myid" x="50"/> <use fill="blue" href="#myid" x="50%"/> </svg>

height

href

width

y

World Wide Web Consortium (W3C)