From e8789920d77c199cfbb66c12a3a56c80129c9e5b Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Wed, 27 Nov 2024 08:59:10 +0800 Subject: [PATCH 1/4] Add bcd info for pattern related svg attributes --- files/en-us/web/svg/attribute/height/index.md | 77 +++++++------ files/en-us/web/svg/attribute/href/index.md | 6 +- .../attribute/preserveaspectratio/index.md | 47 ++++---- .../en-us/web/svg/attribute/viewbox/index.md | 18 ++- files/en-us/web/svg/attribute/width/index.md | 107 ++++++++++-------- files/en-us/web/svg/attribute/x/index.md | 69 +++++++++-- .../svg/attribute/xlink_colon_href/index.md | 57 ++++++---- files/en-us/web/svg/attribute/y/index.md | 69 +++++++++-- 8 files changed, 309 insertions(+), 141 deletions(-) diff --git a/files/en-us/web/svg/attribute/height/index.md b/files/en-us/web/svg/attribute/height/index.md index eeebef322ab0ac0..51d530c06331a19 100644 --- a/files/en-us/web/svg/attribute/height/index.md +++ b/files/en-us/web/svg/attribute/height/index.md @@ -2,12 +2,15 @@ title: height slug: Web/SVG/Attribute/height page-type: svg-attribute -spec-urls: - - https://drafts.fxtf.org/filter-effects/#element-attrdef-filter-height - - https://drafts.fxtf.org/filter-effects/#element-attrdef-filter-primitive-height - - https://drafts.fxtf.org/css-masking-1/#element-attrdef-mask-height - - https://svgwg.org/svg2-draft/geometry.html#Sizing - - https://svgwg.org/svg2-draft/pservers.html#PatternElementHeightAttribute +browser-compat: + - svg.elements.filter.height + - svg.elements.foreignObject.height + - svg.elements.image.height + - svg.elements.mask.height + - svg.elements.pattern.height + - svg.elements.rect.height + - svg.elements.svg.height + - svg.elements.use.height --- {{SVGRef}} @@ -42,7 +45,7 @@ You can use this attribute with the following SVG elements: - {{SVGElement('svg')}} - {{SVGElement('use')}} -## Example +## Examples ```css hidden html, @@ -61,9 +64,13 @@ svg { ``` -{{EmbedLiveSample("Example", '100%', 200)}} +{{EmbedLiveSample("Examples", '100%', 200)}} -## feBlend +## Elements + +You can use this attribute with the SVG elements described in the sections below. + +### `` For {{SVGElement('feBlend')}}, `height` defines the vertical length for the rendering area of the primitive. @@ -94,7 +101,7 @@ For {{SVGElement('feBlend')}}, `height` defines the vertical length for the rend -## feColorMatrix +### `` For {{SVGElement('feColorMatrix')}}, `height` defines the vertical length for the rendering area of the primitive. @@ -125,7 +132,7 @@ For {{SVGElement('feColorMatrix')}}, `height` defines the vertical length for th -## feComponentTransfer +### `` For {{SVGElement('feComponentTransfer')}}, `height` defines the vertical length for the rendering area of the primitive. @@ -156,7 +163,7 @@ For {{SVGElement('feComponentTransfer')}}, `height` defines the vertical length -## feComposite +### `` For {{SVGElement('feComposite')}}, `height` defines the vertical length for the rendering area of the primitive. @@ -187,7 +194,7 @@ For {{SVGElement('feComposite')}}, `height` defines the vertical length for the -## feConvolveMatrix +### `` For {{SVGElement('feConvolveMatrix')}}, `height` defines the vertical length for the rendering area of the primitive. @@ -218,7 +225,7 @@ For {{SVGElement('feConvolveMatrix')}}, `height` defines the vertical length for -## feDiffuseLighting +### `` For {{SVGElement('feDiffuseLighting')}}, `height` defines the vertical length for the rendering area of the primitive. @@ -249,7 +256,7 @@ For {{SVGElement('feDiffuseLighting')}}, `height` defines the vertical length fo -## feDisplacementMap +### `` For {{SVGElement('feDisplacementMap')}}, `height` defines the vertical length for the rendering area of the primitive. @@ -280,7 +287,7 @@ For {{SVGElement('feDisplacementMap')}}, `height` defines the vertical length fo -## feDropShadow +### `` For {{SVGElement('feDropShadow')}}, `height` defines the vertical length for the rendering area of the primitive. @@ -311,7 +318,7 @@ For {{SVGElement('feDropShadow')}}, `height` defines the vertical length for the -## feFlood +### `` For {{SVGElement('feFlood')}}, `height` defines the vertical length for the rendering area of the primitive. @@ -342,7 +349,7 @@ For {{SVGElement('feFlood')}}, `height` defines the vertical length for the rend -## feGaussianBlur +### `` For {{SVGElement('feGaussianBlur')}}, `height` defines the vertical length for the rendering area of the primitive. @@ -373,7 +380,7 @@ For {{SVGElement('feGaussianBlur')}}, `height` defines the vertical length for t -## feImage +### `` For {{SVGElement('feImage')}}, `height` defines the vertical length for the rendering area of the primitive. @@ -404,7 +411,7 @@ For {{SVGElement('feImage')}}, `height` defines the vertical length for the rend -## feMerge +### `` For {{SVGElement('feMerge')}}, `height` defines the vertical length for the rendering area of the primitive. @@ -435,7 +442,7 @@ For {{SVGElement('feMerge')}}, `height` defines the vertical length for the rend -## feMorphology +### `` For {{SVGElement('feMorphology')}}, `height` defines the vertical length for the rendering area of the primitive. @@ -466,7 +473,7 @@ For {{SVGElement('feMorphology')}}, `height` defines the vertical length for the -## feOffset +### `` For {{SVGElement('feOffset')}}, `height` defines the vertical length for the rendering area of the primitive. @@ -497,7 +504,7 @@ For {{SVGElement('feOffset')}}, `height` defines the vertical length for the ren -## feSpecularLighting +### `` For {{SVGElement('feSpecularLighting')}}, `height` defines the vertical length for the rendering area of the primitive. @@ -528,7 +535,7 @@ For {{SVGElement('feSpecularLighting')}}, `height` defines the vertical length f -## feTile +### `` For {{SVGElement('feTile')}}, `height` defines the vertical length for the rendering area of the primitive. @@ -559,7 +566,7 @@ For {{SVGElement('feTile')}}, `height` defines the vertical length for the rende -## feTurbulence +### `` For {{SVGElement('feTurbulence')}}, `height` defines the vertical length for the rendering area of the primitive. @@ -590,7 +597,7 @@ For {{SVGElement('feTurbulence')}}, `height` defines the vertical length for the -## filter +### `` For {{SVGElement('filter')}}, `height` defines the vertical length for the rendering area of the filter. @@ -621,7 +628,7 @@ For {{SVGElement('filter')}}, `height` defines the vertical length for the rende -## foreignObject +### `` For {{SVGElement('foreignObject')}}, `height` defines the vertical length for the rendering area for the referenced document. @@ -656,7 +663,7 @@ For {{SVGElement('foreignObject')}}, `height` defines the vertical length for th > [!NOTE] > Starting with SVG2, `height` is a _Geometry Property_ meaning this attribute can also be used as a CSS property for ``. -## image +### `` For {{SVGElement('image')}}, `height` defines the vertical length for the image. @@ -691,7 +698,7 @@ For {{SVGElement('image')}}, `height` defines the vertical length for the image. > [!NOTE] > Starting with SVG2, `height` is a _Geometry Property_ meaning this attribute can also be used as a CSS property for images. -## mask +### `` For {{SVGElement('mask')}}, `height` defines the vertical length of its area of effect. The exact effect of this attribute is influenced by the {{SVGAttr('maskUnits')}} attribute. @@ -722,7 +729,7 @@ For {{SVGElement('mask')}}, `height` defines the vertical length of its area of -## pattern +### `` For {{SVGElement('pattern')}}, `height` defines the vertical length of the tile pattern. The exact effect of this attribute is influenced by the {{SVGAttr('patternUnits')}} and {{SVGAttr('patternTransform')}} attributes. @@ -747,7 +754,7 @@ For {{SVGElement('pattern')}}, `height` defines the vertical length of the tile -## rect +### `` For {{SVGElement('rect')}}, `height` defines the vertical length for the rectangle. @@ -782,7 +789,7 @@ For {{SVGElement('rect')}}, `height` defines the vertical length for the rectang > [!NOTE] > Starting with SVG2, `height` is a _Geometry Property_ meaning this attribute can also be used as a CSS property for rectangles. -## svg +### `` For {{SVGElement('svg')}}, `height` defines the vertical length for the rendering area of the SVG viewport. @@ -820,7 +827,7 @@ For {{SVGElement('svg')}}, `height` defines the vertical length for the renderin > [!NOTE] > Starting with SVG2, `height` is a _Geometry Property_ meaning this attribute can also be used as a CSS property for ``. -## use +### `` For {{SVGElement('use')}}, `height` defines the vertical length for the referenced element. @@ -860,3 +867,7 @@ For {{SVGElement('use')}}, `height` defines the vertical length for the referenc ## 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 f4760f7fce7422f..9356192cd5ad57e 100644 --- a/files/en-us/web/svg/attribute/href/index.md +++ b/files/en-us/web/svg/attribute/href/index.md @@ -7,6 +7,7 @@ browser-compat: - svg.elements.animate.href - svg.elements.animateMotion.href - svg.elements.animateTransform.href + - svg.elements.cursor.href - svg.elements.feImage.href - svg.elements.image.href - svg.elements.linearGradient.href @@ -32,6 +33,7 @@ You can use this attribute with the following SVG elements: - {{SVGElement("animate")}} - {{SVGElement("animateMotion")}} - {{SVGElement("animateTransform")}} +- {{SVGElement("cursor")}} - {{SVGElement("feImage")}} - {{SVGElement("image")}} - {{SVGElement("linearGradient")}} @@ -63,7 +65,9 @@ svg { {{EmbedLiveSample("Example", "320", "100")}} -## In SVG +## Elements + +You can use this attribute with the SVG elements described in the sections below. ### a diff --git a/files/en-us/web/svg/attribute/preserveaspectratio/index.md b/files/en-us/web/svg/attribute/preserveaspectratio/index.md index 0e594d1bb11a0b0..ef5e318908293f9 100644 --- a/files/en-us/web/svg/attribute/preserveaspectratio/index.md +++ b/files/en-us/web/svg/attribute/preserveaspectratio/index.md @@ -2,9 +2,12 @@ title: preserveAspectRatio slug: Web/SVG/Attribute/preserveAspectRatio page-type: svg-attribute -spec-urls: - - https://drafts.fxtf.org/filter-effects/#element-attrdef-feimage-preserveaspectratio - - https://svgwg.org/svg2-draft/coords.html#PreserveAspectRatioAttribute +browser-compat: + - svg.elements.svg.preserveAspectRatio + - svg.elements.symbol.preserveAspectRatio + - svg.elements.image.preserveAspectRatio + - svg.elements.feImage.preserveAspectRatio + - svg.elements.view.preserveAspectRatio --- {{SVGRef}} @@ -13,6 +16,16 @@ The **`preserveAspectRatio`** attribute indicates how an element with a viewBox The aspect ratio of an SVG image is defined by the {{SVGAttr('viewBox')}} attribute. Therefore, if `viewBox` isn't set, the `preserveAspectRatio` attribute has no effect on SVG's scaling (except in the case of the {{SVGElement('image')}} element, where `preserveAspectRatio` behaves differently as described below). +You can use this attribute with the following SVG elements: + +- {{SVGElement("svg")}} +- {{SVGElement("symbol")}} +- {{SVGElement("image")}} +- {{SVGElement("feImage")}} +- {{SVGElement("marker")}} +- {{SVGElement("pattern")}} +- {{SVGElement("view")}} + ## Syntax ```plain @@ -533,17 +546,9 @@ rect:active { ## Elements -You can use this attribute with the following SVG elements: +You can use this attribute with the SVG elements described in the sections below. -- {{SVGElement("svg")}} -- {{SVGElement("symbol")}} -- {{SVGElement("image")}} -- {{SVGElement("feImage")}} -- {{SVGElement("marker")}} -- {{SVGElement("pattern")}} -- {{SVGElement("view")}} - -### feImage +### `` For {{SVGElement('feImage')}}, `preserveAspectRatio` defines how the referenced image should fit in the rectangle define by the `` element. @@ -564,7 +569,7 @@ For {{SVGElement('feImage')}}, `preserveAspectRatio` defines how the referenced -### image +### `` For {{SVGElement('image')}}, `preserveAspectRatio` defines how the referenced image should fit in the rectangle define by the `` element. @@ -585,7 +590,7 @@ For {{SVGElement('image')}}, `preserveAspectRatio` defines how the referenced im -### marker +### `` For {{SVGElement('marker')}}, `preserveAspectRatio` indicates if a uniform scaling must be performed to fit the element viewport. @@ -606,7 +611,7 @@ For {{SVGElement('marker')}}, `preserveAspectRatio` indicates if a uniform scali -### pattern +### `` For {{SVGElement('pattern')}}, `preserveAspectRatio` indicates if a uniform scaling must be performed to fit the element viewport. @@ -627,7 +632,7 @@ For {{SVGElement('pattern')}}, `preserveAspectRatio` indicates if a uniform scal -### svg +### `` For {{SVGElement('svg')}}, `preserveAspectRatio` indicates if a uniform scaling must be performed to fit the element viewport. @@ -648,7 +653,7 @@ For {{SVGElement('svg')}}, `preserveAspectRatio` indicates if a uniform scaling -### symbol +### `` For {{SVGElement('symbol')}}, `preserveAspectRatio` indicates if a uniform scaling must be performed to fit the element viewport. @@ -669,7 +674,7 @@ For {{SVGElement('symbol')}}, `preserveAspectRatio` indicates if a uniform scali -### view +### `` For {{SVGElement('view')}}, `preserveAspectRatio` indicates if a uniform scaling must be performed to fit the element viewport. @@ -693,3 +698,7 @@ For {{SVGElement('view')}}, `preserveAspectRatio` indicates if a uniform scaling ## Specifications {{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/svg/attribute/viewbox/index.md b/files/en-us/web/svg/attribute/viewbox/index.md index d12ea97fba66088..500bee6b7fb051e 100644 --- a/files/en-us/web/svg/attribute/viewbox/index.md +++ b/files/en-us/web/svg/attribute/viewbox/index.md @@ -2,7 +2,11 @@ title: viewBox slug: Web/SVG/Attribute/viewBox page-type: svg-attribute -spec-urls: https://svgwg.org/svg2-draft/coords.html#ViewBoxAttribute +browser-compat: + - svg.elements.svg.viewBox + - svg.elements.symbol.viewBox + - svg.elements.marker.viewBox + - svg.elements.view.viewBox --- {{SVGRef}} @@ -12,6 +16,14 @@ The **`viewBox`** attribute defines the position and dimension, in user space, o The value of the `viewBox` attribute is a list of four numbers separated by whitespace and/or a comma: `min-x`, `min-y`, `width`, and `height`. `min-x` and `min-y` represent the smallest X and Y coordinates that the `viewBox` may have (the origin coordinates of the `viewBox`) and the `width` and `height` specify the `viewBox` size. The resulting `viewBox` is a rectangle in user space mapped to the bounds of the viewport of an SVG element (not the [browser viewport](/en-US/docs/Glossary/Viewport)). When an SVG contains a `viewBox` attribute (often in combination with a [`preserveAspectRatio`](/en-US/docs/Web/SVG/Attribute/preserveAspectRatio) attribute), a transform stretches or resizes the SVG viewport to fit a particular container element. +You can use this attribute with the following SVG elements: + +- {{SVGElement("svg")}} +- {{SVGElement("symbol")}} +- {{SVGElement("marker")}} +- {{SVGElement("pattern")}} +- {{SVGElement("view")}} + ## Elements You can use this attribute with the SVG elements described in the sections below. @@ -269,3 +281,7 @@ The user units of `r="4"` are resolved against the `viewBox` sizes, creating dra ## Specifications {{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/svg/attribute/width/index.md b/files/en-us/web/svg/attribute/width/index.md index b6377c4df46dcc5..b2a7b4df76a53a9 100644 --- a/files/en-us/web/svg/attribute/width/index.md +++ b/files/en-us/web/svg/attribute/width/index.md @@ -2,18 +2,65 @@ title: width slug: Web/SVG/Attribute/width page-type: svg-attribute -spec-urls: - - https://drafts.fxtf.org/filter-effects/#element-attrdef-filter-width - - https://drafts.fxtf.org/filter-effects/#element-attrdef-filter-primitive-width - - https://drafts.fxtf.org/css-masking-1/#element-attrdef-mask-width - - https://svgwg.org/svg2-draft/geometry.html#Sizing - - https://svgwg.org/svg2-draft/pservers.html#PatternElementWidthAttribute +browser-compat: + - svg.elements.filter.width + - svg.elements.foreignObject.width + - svg.elements.image.width + - svg.elements.mask.width + - svg.elements.pattern.width + - svg.elements.rect.width + - svg.elements.svg.width + - svg.elements.use.width --- {{SVGRef}} The **`width`** attribute defines the horizontal length of an element in the user coordinate system. +## Examples + +```css hidden +html, +body, +svg { + height: 100%; +} +``` + +This example includes three {{SVGElement("rect")}} elements with varied `width` attribute values. The first `` has a `width="0"` set. SVG elements with a width of `0` or less are not rendered. + +```html + + + + + + +``` + +{{EmbedLiveSample("Examples", '100%', 200)}} + ## Elements You can use this attribute with the SVG elements described in the sections below. @@ -862,50 +909,10 @@ For {{SVGElement('use')}}, `width` defines the horizontal length for the referen > [!NOTE] > Starting with SVG2, `width` is a _Geometry Property_ meaning this attribute can also be used as a CSS property for used elements. -## Examples - -```css hidden -html, -body, -svg { - height: 100%; -} -``` - -This example includes three {{SVGElement("rect")}} elements with varied `width` attribute values. The first `` has a `width="0"` set. SVG elements with a width of `0` or less are not rendered. - -```html - - - - - - -``` - -{{EmbedLiveSample("Examples", '100%', 200)}} - ## Specifications {{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/svg/attribute/x/index.md b/files/en-us/web/svg/attribute/x/index.md index 814a1425556fe24..5419908294dc5ca 100644 --- a/files/en-us/web/svg/attribute/x/index.md +++ b/files/en-us/web/svg/attribute/x/index.md @@ -2,21 +2,68 @@ title: x slug: Web/SVG/Attribute/x page-type: svg-attribute -spec-urls: - - https://drafts.fxtf.org/filter-effects/#element-attrdef-filter-x - - https://drafts.fxtf.org/filter-effects/#element-attrdef-fespotlight-x - - https://drafts.fxtf.org/filter-effects/#element-attrdef-fepointlight-x - - https://drafts.fxtf.org/filter-effects/#element-attrdef-filter-primitive-x - - https://drafts.fxtf.org/css-masking-1/#element-attrdef-mask-x - - https://svgwg.org/svg2-draft/geometry.html#X - - https://svgwg.org/svg2-draft/pservers.html#PatternElementXAttribute - - https://svgwg.org/svg2-draft/text.html#TextElementXAttribute +browser-compat: + - svg.elements.cursor.x + - svg.elements.fePointLight.x + - svg.elements.feSpotLight.x + - svg.elements.filter.x + - svg.elements.foreignObject.x + - svg.elements.glyphRef.x + - svg.elements.image.x + - svg.elements.mask.x + - svg.elements.pattern.x + - svg.elements.rect.x + - svg.elements.svg.x + - svg.elements.text.x + - svg.elements.tspan.x + - svg.elements.use.x --- {{SVGRef}} The **`x`** attribute defines an x-axis coordinate in the user coordinate system. +You can use this attribute with the following SVG elements: + +- {{SVGElement("cursor")}} +- {{SVGElement("feBlend")}} +- {{SVGElement("feColorMatrix")}} +- {{SVGElement("feComponentTransfer")}} +- {{SVGElement("feComposite")}} +- {{SVGElement("feConvolveMatrix")}} +- {{SVGElement("feDiffuseLighting")}} +- {{SVGElement("feDisplacementMap")}} +- {{SVGElement("feDropShadow")}} +- {{SVGElement("feFlood")}} +- {{SVGElement("feFuncA")}} +- {{SVGElement("feFuncB")}} +- {{SVGElement("feFuncG")}} +- {{SVGElement("feFuncR")}} +- {{SVGElement("feGaussianBlur")}} +- {{SVGElement("feImage")}} +- {{SVGElement("feMerge")}} +- {{SVGElement("feMergeNode")}} +- {{SVGElement("feMorphology")}} +- {{SVGElement("feOffset")}} +- {{SVGElement("fePointLight")}} +- {{SVGElement("feSpecularLighting")}} +- {{SVGElement("feSpotLight")}} +- {{SVGElement("feTile")}} +- {{SVGElement("feTurbulence")}} +- {{SVGElement("filter")}} +- {{SVGElement("foreignObject")}} +- {{SVGElement("glyphRef")}} +- {{SVGElement("image")}} +- {{SVGElement("mask")}} +- {{SVGElement("pattern")}} +- {{SVGElement("pattern")}} +- {{SVGElement("rect")}} +- {{SVGElement("svg")}} +- {{SVGElement("text")}} +- {{SVGElement("tref")}} +- {{SVGElement("tspan")}} +- {{SVGElement("use")}} + ## Elements You can use this attribute with the SVG elements described in the sections below. @@ -1328,3 +1375,7 @@ svg { ## Specifications {{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/svg/attribute/xlink_colon_href/index.md b/files/en-us/web/svg/attribute/xlink_colon_href/index.md index 345e39b05c1f118..975879c508d42f5 100644 --- a/files/en-us/web/svg/attribute/xlink_colon_href/index.md +++ b/files/en-us/web/svg/attribute/xlink_colon_href/index.md @@ -4,7 +4,22 @@ slug: Web/SVG/Attribute/xlink:href page-type: svg-attribute status: - deprecated -browser-compat: svg.elements.a.xlink_href +browser-compat: + - svg.elements.a.xlink_href + - svg.elements.cursor.xlink_href + - svg.elements.feImage.xlink_href + - svg.elements.filter.xlink_href + - svg.elements.font-face-uri.xlink_href + - svg.elements.glyphRef.xlink_href + - svg.elements.image.xlink_href + - svg.elements.linearGradient.xlink_href + - svg.elements.mpath.xlink_href + - svg.elements.pattern.xlink_href + - svg.elements.radialGradient.xlink_href + - svg.elements.script.xlink_href + - svg.elements.textPath.xlink_href + - svg.elements.tref.xlink_href + - svg.elements.use.xlink_href --- {{SVGRef}}{{Deprecated_Header}} @@ -36,7 +51,7 @@ You can use this attribute with the following SVG elements: - {{SVGElement("tref")}} - {{SVGElement("use")}} -## Example +## Examples ```css hidden html, @@ -54,9 +69,13 @@ svg { ``` -{{EmbedLiveSample("Example", "320", "100")}} +{{EmbedLiveSample("Examples", "320", "100")}} -## a +## Elements + +You can use this attribute with the SVG elements described in the sections below. + +## `` For {{SVGElement("a")}}, `xlink:href` defines the location of the referenced object. @@ -81,7 +100,7 @@ For {{SVGElement("a")}}, `xlink:href` defines the location of the referenced obj -## animate, animateMotion, animateTransform, set +### ``, ``, ``, `` For {{SVGElement("animate")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, and {{SVGElement("set")}}, `xlink:href` defines the reference to the element which is the target of this animation and which therefore will be modified over time. @@ -114,7 +133,7 @@ Refer to the descriptions of the individual animation elements for any restricti -## cursor +### `` For {{SVGElement("cursor")}}, `xlink:href` defines the reference to the file or element which provides the image of the cursor. @@ -141,7 +160,7 @@ For {{SVGElement("cursor")}}, `xlink:href` defines the reference to the file or -## feImage +### `` For {{SVGElement("feImage")}}, `xlink:href` defines the reference to the image source. @@ -166,7 +185,7 @@ For {{SVGElement("feImage")}}, `xlink:href` defines the reference to the image s -## filter +### `` For {{SVGElement("filter")}}, `xlink:href` defines the reference to another `` element within the current SVG document fragment. Any attributes which are defined on the referenced `` element which are not defined on this element are inherited by this element. If this element has no defined filter nodes, and the referenced element has defined filter nodes (possibly due to its own `xlink:href` attribute), then this element inherits the filter nodes defined from the referenced `` element. Inheritance can be indirect to an arbitrary level; thus, if the referenced `` element inherits attributes or its filter node specification due to its own `xlink:href` attribute, then the current element can inherit those attributes or filter node specifications. @@ -191,7 +210,7 @@ For {{SVGElement("filter")}}, `xlink:href` defines the reference to another ` -## font-face-uri +### `` For {{SVGElement("font-face-uri")}}, `xlink:href` defines the location of the referenced font. @@ -216,7 +235,7 @@ For {{SVGElement("font-face-uri")}}, `xlink:href` defines the location of the re -## glyphRef +### `` For {{SVGElement("glyphRef")}}, `xlink:href` defines to a {{SVGElement("glyph")}} element in an SVG document fragment. The referenced `` is rendered as an alternate glyph. @@ -241,7 +260,7 @@ For {{SVGElement("glyphRef")}}, `xlink:href` defines to a {{SVGElement("glyph")} -## image +### `` For {{SVGElement("image")}}, `xlink:href` defines the location of the referenced image. @@ -266,7 +285,7 @@ For {{SVGElement("image")}}, `xlink:href` defines the location of the referenced -## linearGradient +### `` For {{SVGElement("linearGradient")}}, `xlink:href` defines the reference to a different `` or {{SVGElement("radialGradient")}} element within the current SVG document fragment. Any `` attributes which are defined on the referenced element which are not defined on this element are inherited by this element. If this element has no defined gradient stops, and the referenced element does (possibly due to its own `xlink:href` attribute), then this element inherits the gradient stop from the referenced element. Inheritance can be indirect to an arbitrary level; thus, if the referenced element inherits attribute or gradient stops due to its own `xlink:href` attribute, then the current element can inherit those attributes or gradient stops. @@ -291,7 +310,7 @@ For {{SVGElement("linearGradient")}}, `xlink:href` defines the reference to a di -## mpath +### `` For {{SVGElement("mpath")}}, `xlink:href` defines the reference to the {{SVGElement("path")}} element which defines the motion path. @@ -316,7 +335,7 @@ For {{SVGElement("mpath")}}, `xlink:href` defines the reference to the {{SVGElem -## pattern +### `` For {{SVGElement("pattern")}}, `xlink:href` defines the reference to a different `` element within the current SVG document fragment. Any attributes which are defined on the referenced element which are not defined on this element are inherited by this element. If this element has no children, and the referenced element does (possibly due to its own `xlink:href` attribute), then this element inherits the children from the referenced element. Inheritance can be indirect to an arbitrary level; thus, if the referenced element inherits attributes or children due to its own `xlink:href` attribute, then the current element can inherit those attributes or children. @@ -341,7 +360,7 @@ For {{SVGElement("pattern")}}, `xlink:href` defines the reference to a different -## radialGradient +### `` For {{SVGElement("radialGradient")}}, `xlink:href` defines the to a different {{SVGElement("linearGradient")}} or `` element within the current SVG document fragment. Any `` attributes which are defined on the referenced element which are not defined on this element are inherited by this element. If this element has no defined gradient stops, and the referenced element does (possibly due to its own `xlink:href` attribute), then this element inherits the gradient stop from the referenced element. Inheritance can be indirect to an arbitrary level; thus, if the referenced element inherits attribute or gradient stops due to its own `xlink:href` attribute, then the current element can inherit those attributes or gradient stops. @@ -366,7 +385,7 @@ For {{SVGElement("radialGradient")}}, `xlink:href` defines the to a different {{ -## script +### ` ``` -{{EmbedLiveSample("Examples", '100%', 200)}} +{{EmbedLiveSample("Example", '100%', 200)}} ## Elements From 9ab27ad2bee931dcefcc4ce53f2faefeee53c4a2 Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Fri, 20 Dec 2024 11:06:17 +0800 Subject: [PATCH 4/4] Update index.md --- files/en-us/web/svg/attribute/height/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/svg/attribute/height/index.md b/files/en-us/web/svg/attribute/height/index.md index 10df16a9f44200a..51d530c06331a19 100644 --- a/files/en-us/web/svg/attribute/height/index.md +++ b/files/en-us/web/svg/attribute/height/index.md @@ -45,7 +45,7 @@ You can use this attribute with the following SVG elements: - {{SVGElement('svg')}} - {{SVGElement('use')}} -## Example +## Examples ```css hidden html, @@ -64,7 +64,7 @@ svg { ``` -{{EmbedLiveSample("Example", '100%', 200)}} +{{EmbedLiveSample("Examples", '100%', 200)}} ## Elements