2013-07-11 7 views
6

Obecnie próbuję narysować trochę grafiki w formacie SVG, rozmiar papieru to A4, 1 jednostka logiczna oznacza 1 mm. Więc ustawiłem rzutnię na 297mmx210mm, widok jako 297x210. Problem polega na tym, że szerokość kresek rysowanego przeze mnie wykresu nie jest już równa 1 pikselowi. Na przykład,Rysowanie 1-pikselowego wykresu szerokości obrysu na rysunku w formacie A4

<!DOCTYPE html> 
<html> 
<body> 
<svg width="297mm" height="210mm" viewBox='0 0 297 210' style="border: 1px solid #cccccc;"> 
    <path stroke="black" fill="none" stroke-width='1' d='M 10 10 L 60 10'/> 
    <path stroke="black" fill="none" stroke-width='1px' d='M 10 30 L 60 30'/> 
    <path stroke="black" fill="none" d='M 10 50 L 60 50'/> 
</svg> 
</body> 
</html> 

te 3 linie powyżej mają dokładny ta sama linia szerokość nawet ustawić swój skok szerokości jako „1px”. Czy w takim ustawieniu nadal można narysować linię o szerokości 1 piksela?

+0

może działać szerokość skoku = '0,762'? – Orangepill

+1

Nie sądzę, że papier ma piksele. użyj jednostek ekranowych na ekranie lub wydrukuj plik SVG i zobacz, jak pojawiają się cienkie linie ... – dandavis

+0

domyślnie 1 mm = 3,779527559 pikseli, więc jeśli ustawię szerokość obrysu = "0.26458", szerokość linii wynosi faktycznie 1 piksel. Ale dla drugiej linii, ponieważ już ustawiłem szerokość obrysu jako "1px". Należy narysować szerokość 1 piksela, prawda? – user2469554

Odpowiedz

8

Spróbuj tego:

<path stroke="black" fill="none" stroke-width='1px' d='M 10 30 L 60 30' vector-effect="non-scaling-stroke"/> 

vector-effect="non-scaling-stroke" jest SVG Tiny 1.2 funkcja, która zmusza szerokość udar być dokładnie to, co można określić, bez względu na skalowanie lub jednostka przekształca się w rzeczywistości. Jest obsługiwany przez FF i Chrome (może inne), ale niestety nie IE (jak dotąd). Jeśli możesz z tym żyć, to jest to najprostsze rozwiązanie twojego problemu.

+0

To świetnie! dzięki za pomoc. – user2469554