Fix syntax for svg stop-related features

[skyclouds2001]

Description

1. SVG <stop> element also accept <script> & <style> as children, see spec and the following sample code
2. the syntax for stop-color is only <color> (currentcolor is already included by <color>, there is no info of <icccolor>)
3. add link to the similar CSS property

sample

<svg
  viewBox="0 0 10 10"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="myGradient" gradientTransform="rotate(90)">
      <stop offset="5%" stop-color="gold" />
      <stop offset="95%" stop-color="red">
        <script>
          console.log(0)
        </script>
        <style>
          stop[offset="95%"] {
            stop-color: green;
          }
        </style>
      </stop>
    </linearGradient>
  </defs>

  <circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>

Motivation

Additional details

Related issues and pull requests

see also mdn/data#782 and mdn/browser-compat-data#25131

[github-actions]

Preview URLs

• /en-US/docs/Web/SVG/Attribute/stop-color
• /en-US/docs/Web/SVG/Attribute/stop-opacity
• /en-US/docs/Web/SVG/Element/stop

(comment last updated: 2024-11-20 16:43:44)