Question 167389 in Html Question posted in
Some basic documentation can be found here.

Html – SVG path does not color properly?

I was wondering why does this occur to me?

I am attempting to draw 2 SVG paths whose strokes will be coloured referenced by a <linearGradient> tag.

However, the first path is completely invisible as I define its stroke to be "url(#0-link-3)".

I am relatively new to HTML, and I was wondering what would be the issue here with my script? I have tried viewing it on Edge Chromium, Chrome and Firefox, and none of them works.

Here’s the script:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>gg</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
        <style>
            svg {
                background-color: aliceblue;
            }
        </style>
    </head>
    <body>
        <svg height="500" width="900" overflow="visible">
            <defs>
                <linearGradient id="0-link-3" x1="0%" x2="100%">
                    <stop offset="0%" stop-color="#a6cee3"></stop>
                    <stop offset="100%" stop-color="#33a02c"></stop>
                </linearGradient>
              </defs>
              <path stroke="url('#0-link-3')" class="linkage" d="M195,50.47C273.75,50.47,273.75,50.47,352.5,50.47" stroke-width="60.93989941174483"></path>
              <path stroke="url('#0-link-3')" class="linkage" d="M195,264.038C273.75,264.038,273.75,97.957,352.5,97.957" stroke-width="34.034333541539844"></path>
        </svg>
    </body> 
</html>

Result:
non-visible first path

I recognised that the first path becomes visible as I change its stroke attribute to solid colours (e.g "black"). The second path is coloured and visible in both scenarios.

<path stroke="black" class="linkage" d="M195,50.47C273.75,50.47,273.75,50.47,352.5,50.47" stroke-width="60.93989941174483"></path>
              <path stroke="black" class="linkage" d="M195,264.038C273.75,264.038,273.75,97.957,352.5,97.957" stroke-width="34.034333541539844"></path>

2 paths are now visible

Tags:

2

Answers


  1. 0

    Instead of using url('#0-link-3') to reference the linear gradient, you should use url(#0-link-3) without the quotation marks around the URL,

    In SVG, when referencing elements within the same document, you use the url() function, but without quotes.(https://developer.mozilla.org/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web)

    Login or Signup to reply.
  2. 0

    The first path had the same starting and ending y-coordinates (50.47). This resulted in a path with 0 height, which is why it was not visible.
    I slightly modified the ending y-coordinate to 50.5, so that it gains some height.

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>gg</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="">
  <style>
    svg {
      background-color: aliceblue;
    }
  </style>
</head>

<body>
  <svg height="500" width="900" overflow="visible">
            <defs>
                <linearGradient id="0-link-3" x1="0%" x2="100%">
                    <stop offset="0%" stop-color="#a6cee3"></stop>
                    <stop offset="100%" stop-color="#33a02c"></stop>
                </linearGradient>
              </defs>
              <path stroke="url('#0-link-3')" class="linkage" d="M195,50.47C273.75,50.47,273.75,50.47,352.5,50.5" stroke-width="60.93989941174483"></path>
              <path stroke="url('#0-link-3')" class="linkage" d="M195,264.038C273.75,264.038,273.75,97.957,352.5,97.957" stroke-width="34.034333541539844"></path>
        </svg>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search