Question

我需要在它上面创建一个箭头指示方向。但是当指定不透明度时，重叠箭头和线看起来很讨厌。解决方案似乎很容易，只需将箭头分开并将每个头部拉到线旁边即可。

这可行，但由于某种原因，浏览器总是在行和箭头之间留下一些空间，看起来很难看。这是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>

Answer 1

你考虑过使用＆lt; marker＆gt ;;去做这个？

解决这个问题的一个简单的解决方法是将形状绘制在彼此之上，然后使用过滤器将不透明度“修补”为不变量：

<filter id="opacity-patch">
   <feComponentTransfer>
       <feFuncA type="discrete" tableValues="0.6 0.6"/>
   </feComponentTransfer>
</filter>

Answer 2

你应该使用标记。它们是为此目的而设计的。

你的例子粗略等同于以下内容。

<!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”分配标记可确保它仅显示在新的中点，而不是路径的开头或结尾。

Answer 3

我们最终偶然发现了一个解决方案。事实证明，您可以通过将不透明度应用于组来完成此操作，并且仅保留单个项目。这似乎是最简单的解决方案，并不会将我们绑定到标记。

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

svg渲染可能出现亚像素精度问题

3 个答案: