圖出偏移到SVG

Question

一個線I需要繪製線在SVG在給定的寬度，例如20像素。

我想才達到什麼是繪製另一條線，什麼線寬度爲原有線路的一半，重疊原線，但不是在市中心，但左對齊/底部。

所以，如果我的x1和x2爲原線爲30，則新行x1和x2是25，因爲左右寬度爲5

Here is a jsFiddle我想才達到的。

UPDATE在jsfiddle上線路正常，因爲x1 == x2，但是當線路不是水平或垂直時，我遇到問題。

我使用下面的代碼來計算出新線x和y座標，但總是有一點差距。

棘手的部分是當我想要旋轉該行。

我不明白，哪裏是錯誤的，也許某個地方與角度的功能呢？

或者是好的，只是SVG/HTML是不夠嚴謹？

<?php 
//Init coordinates and thick 
$x1 = 30; $y1 = 20; 
$x2 = 230; $y2 = 270; 

$lineThick = 20; 
//get the new data 
$newData = getNewPositions($x1, $y1, $x2, $y2, $lineThick); 

function getNewPositions($x1, $y1, $x2, $y2, $thick) { 
    $offset = $thick/4; 
    $new['x1'] = $x1; 
    $new['y1'] = $y1; 
    $new['x2'] = $x2; 
    $new['y2'] = $y2; 
    if ($y1 == $y2) { 
     $new['y1'] = $y1 - $offset; 
     $new['y2'] = $y2 - $offset; 
     return $new; 
    } 
    if ($x1 == $x2) { 
     $new['x1'] = $x1 - $offset; 
     $new['x2'] = $x2 - $offset; 
     return $new; 
    } 

    $a = abs($y2 - $y1); 
    $b = abs($x2 - $x1); 
    $c = sqrt(pow($a,2) + pow($b,2)); 

    $modX = sin($a/$c); 
    $modY = sin($b/$c); 

    $new['x1'] = $x1 - ($offset * $modX); 
    $new['x2'] = $x2 - ($offset * $modX); 
    $new['y1'] = $y1 + ($offset * $modY); 
    $new['y2'] = $y2 + ($offset * $modY); 

    return $new; 
} 

echo '<?xml version="1.0" encoding="UTF-8" standalone="no"?>' . "\n"; 
?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="300" height="300" viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"> 
    <g> 
     <line x1="<?php echo $x1; ?>" y1="<?php echo $y1; ?>" x2="<?php echo $x2; ?>" y2="<?php echo $y2; ?>" style="stroke-width:<?php echo $lineThick; ?>; stroke: #000;" /> 
     <line x1="<?php echo $newData['x1']; ?>" y1="<?php echo $newData['y1']; ?>" x2="<?php echo $newData['x2']; ?>" y2="<?php echo $newData['y2']; ?>" style="stroke-width:<?php echo $lineThick/2; ?>; stroke: #0f0;" /> 
    </g> 
</svg> 

Answer 1

SVG像素完美的計算

svg { 
 
    width: 500px; 
 
}

<svg viewBox="0 0 100 100"> 
 
    <text x="10" y="8" font-size="5">Example</text> 
 
    <g> 
 
    <line x1="20" y1="10" x2="20" y2="20" stroke="green" stroke-width="20" /> 
 
    <line x1="25" y1="10" x2="25" y2="20" stroke="yellow" stroke-width="10" /> 
 
    </g> 
 
    <text x="10" y="24" font-size="5">Now if you zoom your browser</text> 
 
    <text x="10" y="28" font-size="5">the end line should change visibility!</text> 
 
    <text x="10" y="32" font-size="5">How to fix?</text> 
 
    <g> 
 
    <line x1="20" y1="35" x2="20" y2="45" stroke="green" stroke-width="20" /> 
 
    <line x1="25" y1="34.9" x2="25" y2="45.1" stroke="yellow" stroke-width="10.2" /> 
 
    </g> 
 
    <text x="10" y="50" font-size="5">Make it .2 point bigger so that</text> 
 
    <text x="10" y="55" font-size="5">there is no pixel perfect calculation</text> 
 
</svg>

至於爲什麼發生這種情況以及SVG在默認情況下響應於各種規模100％，所以有大量的計算爲瀏覽器如何顯示不同的形狀和在這個過程中一些像素得到四捨五入至關閉可能的，如果我沒有記錯，有些時候是半個像素。

Answer 2

這是我能拿出最好的。我不確定這是否正確，但我希望它能讓你走上正確的道路。

我在本地使用您的上述PHP代碼，我已經來到了確切同樣的結論。某些像素「關閉」。

唯一合乎邏輯的結論，我可以跟（比在代碼中的bug等）是你在做arrhythmical操作時丟失精度。

所以我試圖ceil()或floor()一些值。附近有一座小涉足之後，我修改了這個：

$new['x1'] = $x1 - ($offset * $modX); 
$new['x2'] = $x2 - ($offset * $modX); 
$new['y1'] = $y1 + ($offset * $modY); 
$new['y2'] = $y2 + ($offset * $modY); 

要這樣：

$new['x1'] = floor($x1 - ($offset * $modX)); 
$new['x2'] = floor($x2 - ($offset * $modX)); 
$new['y1'] = ceil($y1 + ($offset * $modY)); 
$new['y2'] = ceil($y2 + ($offset * $modY)); 

而最終的結果是：

雖然不完美這是非常密切的。我只能假設其他操作的精度會丟失。

---

這是不是一個真正的答案，但正如我所說，我希望它讓你在正確的道路上。