Add bcd info for pattern related svg attributes #36992
+309
−141
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,12 +2,15 @@ | |
| title: height | ||
| slug: Web/SVG/Attribute/height | ||
| page-type: svg-attribute | ||
| 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')}} | ||
|
|
||
| ## Examples | ||
skyclouds2001 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| ```css hidden | ||
| html, | ||
|
|
@@ -61,9 +64,13 @@ svg { | |
| </svg> | ||
| ``` | ||
|
|
||
| {{EmbedLiveSample("Examples", '100%', 200)}} | ||
hamishwillee marked this conversation as resolved.
Show resolved
Hide resolved
skyclouds2001 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| ## Elements | ||
|
|
||
| You can use this attribute with the SVG elements described in the sections below. | ||
|
|
||
| ### `<feBlend>` | ||
|
|
||
| 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 | |
| </tbody> | ||
| </table> | ||
|
|
||
| ### `<feColorMatrix>` | ||
|
There was a problem hiding this comment. Where was this heading approach agreed? I like it, but if we're using styling and tag markup in the headings this should be agreed and captured in the SVG page template (it might be, I haven't checked) There was a problem hiding this comment. at present there is only a page template for svg element; and there is no page template for svg attrbute There was a problem hiding this comment. How about you create an SVG attribute template in a PR the way you want it, and then invite people to discuss? Then we can have agreement on things like #36992 (comment) and something that others can match going forward. Thoughts? If you prefer I could create the template on Monday? |
||
|
|
||
| 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 | |
| </tbody> | ||
| </table> | ||
|
|
||
| ### `<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 | |
| </tbody> | ||
| </table> | ||
|
|
||
| ### `<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 | |
| </tbody> | ||
| </table> | ||
|
|
||
| ### `<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 | |
| </tbody> | ||
| </table> | ||
|
|
||
| ### `<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 | |
| </tbody> | ||
| </table> | ||
|
|
||
| ### `<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 | |
| </tbody> | ||
| </table> | ||
|
|
||
| ### `<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 | |
| </tbody> | ||
| </table> | ||
|
|
||
| ### `<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 | |
| </tbody> | ||
| </table> | ||
|
|
||
| ### `<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 | |
| </tbody> | ||
| </table> | ||
|
|
||
| ### `<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 | |
| </tbody> | ||
| </table> | ||
|
|
||
| ### `<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 | |
| </tbody> | ||
| </table> | ||
|
|
||
| ### `<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 | |
| </tbody> | ||
| </table> | ||
|
|
||
| ### `<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 | |
| </tbody> | ||
| </table> | ||
|
|
||
| ### `<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 | |
| </tbody> | ||
| </table> | ||
|
|
||
| ### `<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 | |
| </tbody> | ||
| </table> | ||
|
|
||
| ### `<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 | |
| </tbody> | ||
| </table> | ||
|
|
||
| ### `<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 | |
| </tbody> | ||
| </table> | ||
|
|
||
| ### `<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 `<foreignObject>`. | ||
|
|
||
| ### `<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 | |
| </tbody> | ||
| </table> | ||
|
|
||
| ### `<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 | |
| </tbody> | ||
| </table> | ||
|
|
||
| ### `<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 `<svg>`. | ||
|
|
||
| ### `<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}} | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What's the value in having all of these? In Web APIs it was agreed that we definitely should not add all the cases, say, of where a global might be used.
The reasoning was that it it add a lot of useless information to the page - for example, if you're interested this information, where are you looking. I'd say you would look in the element in which it is used. I'm never going to look and say - hey, the mask support height from version X, let's go use the mask now. Make sense? I'd revert.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@skyclouds2001 The point of this PR seems to be to add these BCD changes. I don't think these are actually unhelpful, but it may be that the broader team disagrees. Where's the agreement for this approach?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
no, maybe, I guess
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Best to start with an agreed template #36992 (comment)