0

我需要创建一条带有箭头的线来指示方向。但是当您指定不透明度时，重叠箭头和线条看起来很糟糕。解决方案似乎很简单，只需拆分箭头并将每个箭头画在线条旁边。

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

3 回答 3

0

Did you consider using <marker>; to do this?

An easy workaround to fix this is to draw the shapes on top of each other and then use a filter to "patch" the opacity to a constant amount afterwards:

<filter id="opacity-patch">
   <feComponentTransfer>
       <feFuncA type="discrete" tableValues="0.6 0.6"/>
   </feComponentTransfer>
</filter>
于 2013-05-16T19:04:24.017 回答
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”分配标记确保它只出现在新的中点，而不是路径的开始或结束。

于 2013-05-20T21:45:56.387 回答
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>
于 2013-05-22T12:22:53.543 回答