我需要在它上面创建一个箭头指示方向。但是当指定不透明度时,重叠箭头和线看起来很讨厌。解决方案似乎很容易,只需将箭头分开并将每个头部拉到线旁边即可。
这可行,但由于某种原因,浏览器总是在行和箭头之间留下一些空间,看起来很难看。这是svg渲染的已知子像素精度问题吗?或者我错过了一些技巧?任何帮助都将非常感激。
示例:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<svg version="1.1" >
<g stroke="blue" fill="blue" opacity="0.6" transform="rotate(30 200 200)">
<path d="M 200 200 L 400 200" stroke-width="6" />
<path d="M 285 197 L 310 190 L 310 197" />
<path d="M 285 203 L 310 210 L 310 203" />
</g>
</svg>
</body>
</html>
答案 0 :(得分:0)
你考虑过使用&lt; marker&gt ;;去做这个?
解决这个问题的一个简单的解决方法是将形状绘制在彼此之上,然后使用过滤器将不透明度“修补”为不变量:
<filter id="opacity-patch">
<feComponentTransfer>
<feFuncA type="discrete" tableValues="0.6 0.6"/>
</feComponentTransfer>
</filter>
答案 1 :(得分:0)
你应该使用标记。它们是为此目的而设计的。
你的例子粗略等同于以下内容。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" >
<defs>
<marker id="Triangle"
viewBox="0 0 15 10" refX="7.5" refY="5"
markerUnits="strokeWidth"
markerWidth="4" markerHeight="3"
orient="auto" fill="blue">
<path d="M 0 0 L 15 5 L 0 10 z" />
</marker>
</defs>
<g stroke="blue" fill="blue" opacity="0.6" transform="rotate(30 200 200)">
<path d="M 400 200 L 300 200 L 200 200" stroke-width="6" marker-mid="url(#Triangle)" />
</g>
</svg>
</body>
</html>
标记只能放在路径端点上,因此我必须将您的线分成两段。使用“marker-mid”分配标记可确保它仅显示在新的中点,而不是路径的开头或结尾。
答案 2 :(得分:0)
我们最终偶然发现了一个解决方案。事实证明,您可以通过将不透明度应用于组来完成此操作,并且仅保留单个项目。这似乎是最简单的解决方案,并不会将我们绑定到标记。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<svg version="1.1" >
<g stroke="blue" fill="blue" opacity="0.6" transform="rotate(30 200 200)">
<path d="M 200 200 L 400 200" stroke-width="6" />
<path d="M 285 197 L 310 190 L 310 210 L 285 203" />
</g>
</svg>
</body>
</html>