diff --git a/files/en-us/web/svg/attribute/cx/index.md b/files/en-us/web/svg/attribute/cx/index.md index 8eadd12286d7f01..595099b777a90b3 100644 --- a/files/en-us/web/svg/attribute/cx/index.md +++ b/files/en-us/web/svg/attribute/cx/index.md @@ -2,9 +2,10 @@ title: cx slug: Web/SVG/Attribute/cx page-type: svg-attribute -spec-urls: - - https://svgwg.org/svg2-draft/geometry.html#CX - - https://svgwg.org/svg2-draft/pservers.html#RadialGradientElementCXAttribute +browser-compat: + - svg.elements.circle.cx + - svg.elements.ellipse.cx + - svg.elements.radialGradient.cx --- {{SVGRef}} @@ -101,7 +102,9 @@ For {{SVGElement('radialGradient')}}, `cx` defines the x-axis coordinate of the Value - {{cssxref("length-percentage")}} + + <length> + Default value @@ -176,6 +179,10 @@ svg { {{Specifications}} +## Browser compatibility + +{{Compat}} + ## See also - {{SVGAttr("cy")}} diff --git a/files/en-us/web/svg/attribute/cy/index.md b/files/en-us/web/svg/attribute/cy/index.md index 73a7beeeaef8da3..f4cd73ccb9b283b 100644 --- a/files/en-us/web/svg/attribute/cy/index.md +++ b/files/en-us/web/svg/attribute/cy/index.md @@ -2,9 +2,10 @@ title: cy slug: Web/SVG/Attribute/cy page-type: svg-attribute -spec-urls: - - https://svgwg.org/svg2-draft/geometry.html#CY - - https://svgwg.org/svg2-draft/pservers.html#RadialGradientElementCYAttribute +browser-compat: + - svg.elements.circle.cy + - svg.elements.ellipse.cy + - svg.elements.radialGradient.cy --- {{SVGRef}} @@ -101,7 +102,9 @@ For {{SVGElement('radialGradient')}}, `cy` defines the y-axis coordinate of the Value - {{cssxref("length-percentage")}} + + <length> + Default value @@ -176,6 +179,10 @@ svg { {{Specifications}} +## Browser compatibility + +{{Compat}} + ## See also - {{SVGAttr("cx")}} diff --git a/files/en-us/web/svg/attribute/fr/index.md b/files/en-us/web/svg/attribute/fr/index.md index bd4cfd3806b6cb7..fdbf73505592949 100644 --- a/files/en-us/web/svg/attribute/fr/index.md +++ b/files/en-us/web/svg/attribute/fr/index.md @@ -131,7 +131,9 @@ This example has `fr` equal to `5%` and is representing how the attributes `fx` Value - {{cssxref("length")}} + + <length> + Default value diff --git a/files/en-us/web/svg/attribute/fx/index.md b/files/en-us/web/svg/attribute/fx/index.md index 9efaa63327c0e08..62b06dfe079bc1f 100644 --- a/files/en-us/web/svg/attribute/fx/index.md +++ b/files/en-us/web/svg/attribute/fx/index.md @@ -68,7 +68,9 @@ svg { Value - {{cssxref("length")}} + + <length> + Default value diff --git a/files/en-us/web/svg/attribute/fy/index.md b/files/en-us/web/svg/attribute/fy/index.md index fe02116e9df0360..bd41040600df676 100644 --- a/files/en-us/web/svg/attribute/fy/index.md +++ b/files/en-us/web/svg/attribute/fy/index.md @@ -123,7 +123,9 @@ svg { Value - {{cssxref("length")}} + + <length> + Default value diff --git a/files/en-us/web/svg/attribute/gradienttransform/index.md b/files/en-us/web/svg/attribute/gradienttransform/index.md index cdb1c8a520fd8f1..b28a1f9e4638257 100644 --- a/files/en-us/web/svg/attribute/gradienttransform/index.md +++ b/files/en-us/web/svg/attribute/gradienttransform/index.md @@ -2,12 +2,14 @@ title: gradientTransform slug: Web/SVG/Attribute/gradientTransform page-type: svg-attribute -browser-compat: svg.elements.linearGradient.gradientTransform +browser-compat: + - svg.elements.linearGradient.gradientTransform + - svg.elements.radialGradient.gradientTransform --- {{SVGRef}} -The `gradientTransform` attribute contains the definition of an optional additional transformation from the gradient coordinate system onto the target coordinate system (i.e., userSpaceOnUse or objectBoundingBox). This allows for things such as skewing the gradient. This additional transformation matrix is post-multiplied to (i.e., inserted to the right of) any previously defined transformations, including the implicit transformation necessary to convert from object bounding box units to user space. +The **`gradientTransform`** attribute contains the definition of an optional additional transformation from the gradient coordinate system onto the target coordinate system (i.e., userSpaceOnUse or objectBoundingBox). This allows for things such as skewing the gradient. This additional transformation matrix is post-multiplied to (i.e., inserted to the right of) any previously defined transformations, including the implicit transformation necessary to convert from object bounding box units to user space. You can use this attribute with the following SVG elements: diff --git a/files/en-us/web/svg/attribute/gradientunits/index.md b/files/en-us/web/svg/attribute/gradientunits/index.md index bc4269ff65d4c32..3dc6b18c24bb664 100644 --- a/files/en-us/web/svg/attribute/gradientunits/index.md +++ b/files/en-us/web/svg/attribute/gradientunits/index.md @@ -2,9 +2,9 @@ title: gradientUnits slug: Web/SVG/Attribute/gradientUnits page-type: svg-attribute -spec-urls: - - https://svgwg.org/svg2-draft/pservers.html#RadialGradientElementGradientUnitsAttribute - - https://svgwg.org/svg2-draft/pservers.html#LinearGradientElementGradientUnitsAttribute +browser-compat: + - svg.elements.linearGradient.gradientUnits + - svg.elements.radialGradient.gradientUnits --- {{SVGRef}} @@ -78,3 +78,7 @@ For {{SVGElement("radialGradient")}}, `gradientUnits` defines the coordinate sys ## Specifications {{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/svg/attribute/href/index.md b/files/en-us/web/svg/attribute/href/index.md index 995b402e0e6dcbf..f4760f7fce7422f 100644 --- a/files/en-us/web/svg/attribute/href/index.md +++ b/files/en-us/web/svg/attribute/href/index.md @@ -2,7 +2,21 @@ title: href slug: Web/SVG/Attribute/href page-type: svg-attribute -browser-compat: svg.global_attributes.href +browser-compat: + - svg.elements.a.href + - svg.elements.animate.href + - svg.elements.animateMotion.href + - svg.elements.animateTransform.href + - svg.elements.feImage.href + - svg.elements.image.href + - svg.elements.linearGradient.href + - svg.elements.mpath.href + - svg.elements.pattern.href + - svg.elements.radialGradient.href + - svg.elements.script.href + - svg.elements.set.href + - svg.elements.textPath.href + - svg.elements.use.href --- {{SVGRef}} @@ -175,9 +189,9 @@ svg { {{EmbedLiveSample("image", 200, 250)}} -### linearGradient +### linearGradient/radialGradient -For {{SVGElement("linearGradient")}}, `href` defines URL referring to a template gradient element; to be valid, the reference must be to a different `` or {{SVGElement("radialGradient")}} element. +For {{SVGElement("linearGradient")}} or {{SVGElement("radialGradient")}}, `href` defines URL referring to a template gradient element; to be valid, the reference must be to a different `` or `` element. @@ -250,31 +264,6 @@ For {{SVGElement("pattern")}}, `href` defines a URL referring to a different `

-### radialGradient - -For {{SVGElement("radialGradient")}}, `href` defines URL referring to a template gradient element; to be valid, the reference must be to a different {{SVGElement("linearGradient")}} or `` element. - - - - - - - - - - - - - - - - -
Value - <url> -
Default valueNone
AnimatableYes
- ### script For {{SVGElement("script")}}, `href` defines a URL referring to an external resource containing the script code. diff --git a/files/en-us/web/svg/attribute/r/index.md b/files/en-us/web/svg/attribute/r/index.md index 12dce78663a5a34..c858ebd4b01fda9 100644 --- a/files/en-us/web/svg/attribute/r/index.md +++ b/files/en-us/web/svg/attribute/r/index.md @@ -2,9 +2,9 @@ title: r slug: Web/SVG/Attribute/r page-type: svg-attribute -spec-urls: - - https://svgwg.org/svg2-draft/geometry.html#R - - https://svgwg.org/svg2-draft/pservers.html#RadialGradientElementRAttribute +browser-compat: + - svg.elements.circle.r + - svg.elements.radialGradient.r --- {{SVGRef}} @@ -107,12 +107,6 @@ The gradient will be drawn such that the **100%** gradient stop is mapped to the ><length> - | - <percentage> @@ -129,3 +123,7 @@ The gradient will be drawn such that the **100%** gradient stop is mapped to the ## Specifications {{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/svg/attribute/spreadmethod/index.md b/files/en-us/web/svg/attribute/spreadmethod/index.md index a977df1bc46e942..92028cd888bdacb 100644 --- a/files/en-us/web/svg/attribute/spreadmethod/index.md +++ b/files/en-us/web/svg/attribute/spreadmethod/index.md @@ -2,7 +2,9 @@ title: spreadMethod slug: Web/SVG/Attribute/spreadMethod page-type: svg-attribute -browser-compat: svg.elements.linearGradient.spreadMethod +browser-compat: + - svg.elements.linearGradient.spreadMethod + - svg.elements.radialGradient.spreadMethod --- {{SVGRef}} @@ -14,7 +16,7 @@ You can use this attribute with the following SVG elements: - {{SVGElement("linearGradient")}} - {{SVGElement("radialGradient")}} -## Context notes +## Usage notes diff --git a/files/en-us/web/svg/attribute/x1/index.md b/files/en-us/web/svg/attribute/x1/index.md index f53838d0041a5c7..fdce246744ec7c0 100644 --- a/files/en-us/web/svg/attribute/x1/index.md +++ b/files/en-us/web/svg/attribute/x1/index.md @@ -2,9 +2,9 @@ title: x1 slug: Web/SVG/Attribute/x1 page-type: svg-attribute -spec-urls: - - https://svgwg.org/svg2-draft/shapes.html#LineElementX1Attribute - - https://svgwg.org/svg2-draft/pservers.html#LinearGradientElementX1Attribute +browser-compat: + - svg.elements.line.x1 + - svg.elements.linearGradient.x1 --- {{SVGRef}} @@ -86,18 +86,6 @@ For {{SVGElement('linearGradient')}}, `x1` defines the x coordinate of the start ><length> - | - <percentage> - | - <number> @@ -170,3 +158,7 @@ svg { ## Specifications {{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/svg/attribute/x2/index.md b/files/en-us/web/svg/attribute/x2/index.md index 637a3ef05f3fe19..efb0da25bf2e212 100644 --- a/files/en-us/web/svg/attribute/x2/index.md +++ b/files/en-us/web/svg/attribute/x2/index.md @@ -2,9 +2,9 @@ title: x2 slug: Web/SVG/Attribute/x2 page-type: svg-attribute -spec-urls: - - https://svgwg.org/svg2-draft/shapes.html#LineElementX2Attribute - - https://svgwg.org/svg2-draft/pservers.html#LinearGradientElementX2Attribute +browser-compat: + - svg.elements.line.x2 + - svg.elements.linearGradient.x2 --- {{SVGRef}} @@ -86,18 +86,6 @@ For {{SVGElement('linearGradient')}}, `x2` defines the x coordinate of the endin ><length> - | - <percentage> - | - <number> @@ -170,3 +158,7 @@ svg { ## Specifications {{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/svg/attribute/y1/index.md b/files/en-us/web/svg/attribute/y1/index.md index c2ea85f971c2b98..5ac4b26d0e42b76 100644 --- a/files/en-us/web/svg/attribute/y1/index.md +++ b/files/en-us/web/svg/attribute/y1/index.md @@ -2,9 +2,9 @@ title: y1 slug: Web/SVG/Attribute/y1 page-type: svg-attribute -spec-urls: - - https://svgwg.org/svg2-draft/shapes.html#LineElementY1Attribute - - https://svgwg.org/svg2-draft/pservers.html#LinearGradientElementY1Attribute +browser-compat: + - svg.elements.line.y1 + - svg.elements.linearGradient.y1 --- {{SVGRef}} @@ -86,18 +86,6 @@ For {{SVGElement('linearGradient')}}, `y1` defines the y coordinate of the start ><length> - | - <percentage> - | - <number> @@ -172,3 +160,7 @@ svg { ## Specifications {{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/svg/attribute/y2/index.md b/files/en-us/web/svg/attribute/y2/index.md index 67aef8c2ee6d3f0..0044e1baef396a1 100644 --- a/files/en-us/web/svg/attribute/y2/index.md +++ b/files/en-us/web/svg/attribute/y2/index.md @@ -2,9 +2,9 @@ title: y2 slug: Web/SVG/Attribute/y2 page-type: svg-attribute -spec-urls: - - https://svgwg.org/svg2-draft/shapes.html#LineElementY2Attribute - - https://svgwg.org/svg2-draft/pservers.html#LinearGradientElementY2Attribute +browser-compat: + - svg.elements.line.y2 + - svg.elements.linearGradient.y2 --- {{SVGRef}} @@ -86,18 +86,6 @@ For {{SVGElement('linearGradient')}}, `y2` defines the y coordinate of the endin ><length> - | - <percentage> - | - <number> @@ -172,3 +160,7 @@ svg { ## Specifications {{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/svg/element/lineargradient/index.md b/files/en-us/web/svg/element/lineargradient/index.md index 483d532873c54a4..1ce94fc31cf7c41 100644 --- a/files/en-us/web/svg/element/lineargradient/index.md +++ b/files/en-us/web/svg/element/lineargradient/index.md @@ -45,7 +45,7 @@ svg { _Value type_: `userSpaceOnUse`|`objectBoundingBox` ; _Default value_: `objectBoundingBox`; _Animatable_: **yes** - {{SVGAttr("gradientTransform")}} - : This attribute provides additional [transformation](/en-US/docs/Web/SVG/Attribute/transform) to the gradient coordinate system. - _Value type_: **[\](/en-US/docs/Web/SVG/Content_type#transform-list)** ; _Default value_: _identity transform_; _Animatable_: **yes** + _Value type_: [**\**](/en-US/docs/Web/SVG/Content_type#transform-list) ; _Default value_: _identity transform_; _Animatable_: **yes** - {{SVGAttr("href")}} - : This attribute defines a reference to another `` element that will be used as a template. _Value type_: [**\**](/en-US/docs/Web/SVG/Content_type#url) ; _Default value_: none; _Animatable_: **yes** @@ -54,19 +54,19 @@ svg { _Value type_: `pad`|`reflect`|`repeat` ; _Default value_: `pad`; _Animatable_: **yes** - {{SVGAttr("x1")}} - : This attribute defines the x coordinate of the starting point of the vector gradient along which the linear gradient is drawn. - _Value type_: {{cssxref("length-percentage")}} | {{cssxref("number")}}; _Default value_: `0%`; _Animatable_: **yes** + _Value type_: [**\**](/en-US/docs/Web/SVG/Content_type#length); _Default value_: `0%`; _Animatable_: **yes** - {{SVGAttr("x2")}} - : This attribute defines the x coordinate of the ending point of the vector gradient along which the linear gradient is drawn. - _Value type_: {{cssxref("length-percentage")}} | {{cssxref("number")}}; _Default value_: `100%`; _Animatable_: **yes** + _Value type_: [**\**](/en-US/docs/Web/SVG/Content_type#length); _Default value_: `100%`; _Animatable_: **yes** - {{SVGAttr("xlink:href")}} {{deprecated_inline}} - : An [\](/en-US/docs/Web/SVG/Content_type#iri) reference to another `` element that will be used as a template. _Value type_: [**\**](/en-US/docs/Web/SVG/Content_type#iri) ; _Default value_: none; _Animatable_: **yes** - {{SVGAttr("y1")}} - : This attribute defines the y coordinate of the starting point of the vector gradient along which the linear gradient is drawn. - _Value type_: {{cssxref("length-percentage")}} | {{cssxref("number")}}; _Default value_: `0%`; _Animatable_: **yes** + _Value type_: [**\**](/en-US/docs/Web/SVG/Content_type#length); _Default value_: `0%`; _Animatable_: **yes** - {{SVGAttr("y2")}} - : This attribute defines the y coordinate of the ending point of the vector gradient along which the linear gradient is drawn. - _Value type_: {{cssxref("length-percentage")}} | {{cssxref("number")}}; _Default value_: `0%`; _Animatable_: **yes** + _Value type_: [**\**](/en-US/docs/Web/SVG/Content_type#length); _Default value_: `0%`; _Animatable_: **yes** ## Usage context diff --git a/files/en-us/web/svg/element/radialgradient/index.md b/files/en-us/web/svg/element/radialgradient/index.md index 190bdb129f02b81..c7b3864659be2e7 100644 --- a/files/en-us/web/svg/element/radialgradient/index.md +++ b/files/en-us/web/svg/element/radialgradient/index.md @@ -63,7 +63,7 @@ svg { _Value type_: `userSpaceOnUse`|`objectBoundingBox` ; _Default value_: `objectBoundingBox`; _Animatable_: **yes** - {{SVGAttr("gradientTransform")}} - : This attribute provides additional [transformation](/en-US/docs/Web/SVG/Attribute/transform) to the gradient coordinate system. - _Value type_: **[\](/en-US/docs/Web/SVG/Content_type#transform-list)** ; _Default value_: _identity transform_; _Animatable_: **yes** + _Value type_: [**\**](/en-US/docs/Web/SVG/Content_type#transform-list) ; _Default value_: _identity transform_; _Animatable_: **yes** - {{SVGAttr("href")}} - : This attribute defines a reference to another `` element that will be used as a template. _Value type_: [**\**](/en-US/docs/Web/SVG/Content_type#url) ; _Default value_: none; _Animatable_: **yes** diff --git a/files/jsondata/SVGData.json b/files/jsondata/SVGData.json index c670250e4a58680..e09e4c09dc79932 100644 --- a/files/jsondata/SVGData.json +++ b/files/jsondata/SVGData.json @@ -993,25 +993,24 @@ "descriptiveElements", "<animate>", "<animateTransform>", + "<script>", "<set>", - "<stop>" + "<stop>", + "<style>" ] }, "attributes": [ "coreAttributes", "presentationAttributes", "xLinkAttributes", - "'class'", - "'style'", - "'externalResourcesRequired'", "'gradientUnits'", "'gradientTransform'", + "'href'", "'x1'", "'y1'", "'x2'", "'y2'", - "'spreadMethod'", - "'xlink:href'" + "'spreadMethod'" ], "interfaces": ["SVGLinearGradientElement"] }, @@ -1283,26 +1282,26 @@ "descriptiveElements", "<animate>", "<animateTransform>", + "<script>", "<set>", - "<stop>" + "<stop>", + "<style>" ] }, "attributes": [ "coreAttributes", "presentationAttributes", "xLinkAttributes", - "'class'", - "'style'", - "'externalResourcesRequired'", - "'gradientUnits'", - "'gradientTransform'", "'cx'", "'cy'", - "'r'", "'fx'", "'fy'", - "'spreadMethod'", - "'xlink:href'" + "'fr'", + "'gradientUnits'", + "'gradientTransform'", + "'href'", + "'r'", + "'spreadMethod'" ], "interfaces": ["SVGRadialGradientElement"] },