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

<marker> の使用を検討しましたか。これをする？

これを修正する簡単な回避策は、図形を重ねて描画し、フィルタを使用して不透明度を一定量に「パッチ」することです。

<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" >
        <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 に答える