英文:
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.
我试图绘制2个SVG路径，其描边颜色将由<linearGradient>标签引用。
However, the first path is completely invisible as I define its stroke to be "url(#0-link-3)".
然而，由于我将其stroke定义为"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.
我对HTML相对不熟悉，我想知道我的脚本存在什么问题？我已经尝试在Edge Chromium、Chrome和Firefox上查看它，但它们都不起作用。
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:
结果：
I recognized that the first path becomes visible as I change its stroke attribute to solid colors (e.g "black"). The second path is colored and visible in both scenarios.
我注意到，只要我将其stroke属性更改为实色（例如"black"），第一个路径就会变得可见。第二个路径在两种情况下都是有颜色且可见的。
<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>
英文:
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>
答案1
得分: 0
不要使用url('#0-link-3')来引用线性渐变，应该使用不带引号的url(#0-link-3)。
在SVG中，当引用同一文档中的元素时，使用url()函数，但不带引号。 (https://developer.mozilla.org/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web)
英文:
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)
答案2
得分: 0
第一条路径的起始和结束y坐标相同（50.47）。这导致路径的高度为0，因此不可见。我稍微修改了结束y坐标为50.5，以使其具有一定高度。
英文:
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.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论