svg渲染可能導致子像素精度問題

我需要創建一個帶箭頭的線來指示方向。但是，當你指定不透明時，重疊箭頭和線看起來很討厭。解決方案似乎很簡單，只需將箭頭分開，並將每個頭部畫在線旁邊即可。svg渲染可能導致子像素精度問題

這是有效的，但由於某些原因，瀏覽器總是在線和箭頭之間留下一些空間，這看起來很醜。這是一個已知的亞像素精度問題與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>

來源

2013-05-16 user2389066

不能幫助，但可以確認我收到了Firefox和IE類似的效果。如果在三角形上使用10的筆劃寬度，「線」向下移動箭頭，確認這是一個真正的效果，而不是幻覺 –

我們最終偶然找到了解決方案。事實證明，你可以通過將不透明度應用於組來完成此任務，並且可以不設置單個項目。這似乎是最簡單的解決方案，並且不會將我們與標記綁定。

<!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-22 12:22:53 user2389066

你有沒有考慮使用<標記「;去做這個？

一個簡單的解決辦法來解決，這是借鑑彼此頂部的形狀，然後使用過濾器「補丁」不透明度爲恆定量算賬：

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

來源

2013-05-16 19:04:24

您應該使用的標記。它們是爲此目的而設計的。

您的示例的粗略等價物將如下所示。

<!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-20 21:45:56

我們嘗試過使用標記，但是如您所示，必須將線分割成我們想要的部分寧願不做。 – user2389066

svg渲染可能導致子像素精度問題

回答

相關問題