Fix syntax & structure format for svg gradient related features (#36887)

mdn · Nov 24, 2024 · fceea99 · fceea99
1 parent da99ca1
commit fceea99
Show file tree

Hide file tree

Showing 17 changed files with 118 additions and 136 deletions.
diff --git 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
   <tbody>
     <tr>
       <th scope="row">Value</th>
-      <td>{{cssxref("length-percentage")}}</td>
+      <td>
+        <strong><a href="/en-US/docs/Web/SVG/Content_type#length">&#x3C;length></a></strong>
+      </td>
     </tr>
     <tr>
       <th scope="row">Default value</th>
@@ -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
@@ -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
   <tbody>
     <tr>
       <th scope="row">Value</th>
-      <td>{{cssxref("length-percentage")}}</td>
+      <td>
+        <strong><a href="/en-US/docs/Web/SVG/Content_type#length">&#x3C;length></a></strong>
+      </td>
     </tr>
     <tr>
       <th scope="row">Default value</th>
@@ -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
@@ -131,7 +131,9 @@ This example has `fr` equal to `5%` and is representing how the attributes `fx`
   <tbody>
     <tr>
       <th scope="row">Value</th>
-      <td>{{cssxref("length")}}</td>
+      <td>
+        <strong><a href="/en-US/docs/Web/SVG/Content_type#length">&#x3C;length></a></strong>
+      </td>
     </tr>
     <tr>
       <th scope="row">Default value</th>

diff --git 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 {
   <tbody>
     <tr>
       <th scope="row">Value</th>
-      <td>{{cssxref("length")}}</td>
+      <td>
+        <strong><a href="/en-US/docs/Web/SVG/Content_type#length">&#x3C;length></a></strong>
+      </td>
     </tr>
     <tr>
       <th scope="row">Default value</th>

diff --git 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 {
   <tbody>
     <tr>
       <th scope="row">Value</th>
-      <td>{{cssxref("length")}}</td>
+      <td>
+        <strong><a href="/en-US/docs/Web/SVG/Content_type#length">&#x3C;length></a></strong>
+      </td>
     </tr>
     <tr>
       <th scope="row">Default value</th>

diff --git 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
@@ -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
@@ -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 `<linearGradient>` 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 `<linearGradient>` or `<radialGradient>` element.
 
 <table class="properties">
   <tbody>
@@ -250,31 +264,6 @@ For {{SVGElement("pattern")}}, `href` defines a URL referring to a different `<p
   </tbody>
 </table>
 
-### 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 `<radialGradient>` element.
-
-<table class="properties">
-  <tbody>
-    <tr>
-      <th scope="row">Value</th>
-      <td>
-        <code
-          ><a href="/en-US/docs/Web/SVG/Content_type#url">&#x3C;url></a></code
-        >
-      </td>
-    </tr>
-    <tr>
-      <th scope="row">Default value</th>
-      <td><em>None</em></td>
-    </tr>
-    <tr>
-      <th scope="row">Animatable</th>
-      <td>Yes</td>
-    </tr>
-  </tbody>
-</table>
-
 ### 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
@@ -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
             >&#x3C;length></a
           ></strong
         >
-        |
-        <strong
-          ><a href="/en-US/docs/Web/SVG/Content_type#percentage"
-            >&#x3C;percentage></a
-          ></strong
-        >
       </td>
     </tr>
     <tr>
@@ -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
@@ -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
 
 <table class="properties">
   <tbody>

diff --git 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
             >&#x3C;length></a
           ></strong
         >
-        |
-        <strong
-          ><a href="/en-US/docs/Web/SVG/Content_type#percentage"
-            >&#x3C;percentage></a
-          ></strong
-        >
-        |
-        <strong
-          ><a href="/en-US/docs/Web/SVG/Content_type#number"
-            >&#x3C;number></a
-          ></strong
-        >
       </td>
     </tr>
     <tr>
@@ -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
@@ -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
             >&#x3C;length></a
           ></strong
         >
-        |
-        <strong
-          ><a href="/en-US/docs/Web/SVG/Content_type#percentage"
-            >&#x3C;percentage></a
-          ></strong
-        >
-        |
-        <strong
-          ><a href="/en-US/docs/Web/SVG/Content_type#number"
-            >&#x3C;number></a
-          ></strong
-        >
       </td>
     </tr>
     <tr>
@@ -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
@@ -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
             >&#x3C;length></a
           ></strong
         >
-        |
-        <strong
-          ><a href="/en-US/docs/Web/SVG/Content_type#percentage"
-            >&#x3C;percentage></a
-          ></strong
-        >
-        |
-        <strong
-          ><a href="/en-US/docs/Web/SVG/Content_type#number"
-            >&#x3C;number></a
-          ></strong
-        >
       </td>
     </tr>
     <tr>
@@ -172,3 +160,7 @@ svg {
 ## Specifications
 
 {{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}