css SVG路径颜色不正确？

dxxyhpgq 于 2023-05-19 发布在其他

关注(0)|答案(2)|浏览(195)

我在想为什么我会想到这个？
我试图绘制2个SVG路径，其笔划将由<linearGradient>标记引用。
然而，第一个路径是完全不可见的，因为我将其stroke定义为“url（#0-link-3）”。
我是一个相对较新的HTML，我想知道什么会是我的脚本在这里的问题？我试过在Edge Chromium、Chrome和Firefox上查看，但都不起作用。
以下是脚本：

<!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>

结果：non-visible first path
当我将第一条路径的stroke属性更改为纯色（例如“黑色”）时，我发现第一条路径变得可见。第二条路径是彩色的，在两种情况下都可见。

<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

css

来源：https://stackoverflow.com/questions/76241374/svg-path-does-not-color-properly

2条答案

按热度按时间

bvjxkvbb1#

第一路径具有相同的起始和结束y坐标（50.47）。这导致路径的高度为0，这就是它不可见的原因。我稍微修改了结尾的y坐标为 50.5，这样它就增加了一些高度。

<!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>

赞(0）回复(0）举报 2023-05-19

agyaoht72#

不应该使用url('#0-link-3')来引用线性渐变，而应该使用url(#0-link-3)，而不要在URL周围加上引号。
在SVG中，当引用同一文档中的元素时，使用url（）函数，但不带引号。

赞(0）回复(0）举报 2023-05-19