如何在SVG中繪制一條線的一部分？

Question

有沒有人知道是否/如何在與 SVG 中的端點保持一定距離的同時沿着點之間的線繪制？

如果線是水平的（例如從(40,40)到(100,40) ），您可以輕松繪制一條與點保持約20距離的線，如下所示

<line x1="40" y1="40" x2="100" y2="40" desc="directional line" />
<line x1="60" y1="40" x2="80" y2="40" desc="actual part of line" />

然而，對於對角線，它有點難。 要繪制從(40,40)到(100,100)的（簡單）對角線，您需要cos(pi/4) = sin(pi/4) = sqrt(2)來縮放您想要遠離的距離終點（在這種情況下： 20*sqrt(2) = 14.1 ）

<line x1="40" y1="40" x2="100" y2="100" desc="directional line" />
<line x1="54.1" y1="54.1" x2="85.9" y2="85.9" desc="actual part of line" />

可以在這個小提琴中找到此代碼的演示

因此，在計算時似乎可以這樣做

1. 方向線與水平線的夾角
2. 角的正弦和余弦
3. 您要繪制的線的實際部分的端點

這是唯一的方法還是 SVG 能夠指定部分線條，或者是否有更智能、更方便的方法來做到這一點？

Answer 1

我不確定這是否明智或方便，但沒有腳本的一種方法如下。

您可以使用矩形作為標記（marker-start 和marker-end），並且將markerWidth 和markerHeight 屬性與線條的筆觸寬度結合使用，您可以控制標記的大小。

markerWidth * stroke-width = real width

 <svg width="220" height="220"> <marker id="m1" orient="auto" viewBox="0 0 20 6" markerWidth="10" markerHeight="3" refX="20" refY="3"> <rect x="0" y="0" width="20" height="6" fill="red" opacity="0.5" /> </marker> <marker id="m2" orient="auto" viewBox="0 0 20 6" markerWidth="10" markerHeight="3" refX="0" refY="3"> <rect x="0" y="0" width="20" height="6" fill="red" opacity="0.5" /> </marker> <line id="l2" x1="20" y1="20" x2="200" y2="80" marker-end="url(#m1)" marker-start="url(#m2)" stroke="black" stroke-width="2" /> </svg>

現在假設我們使用白色矩形，那么標記將以固定寬度與線重疊，並且我們與端點的距離是固定的。

但這並不是我們真正想要的。 要真正通過標記“剪切”線條，您可以使用遮罩。 因此，將您的線條繪制為蒙版，使用白色筆觸，但使用黑色標記。

將此蒙版應用到您的線條（不帶標記）...就這樣：一條具有可見筆划的線條，與端點的距離固定。

優點：不涉及 javascript

缺點：你必須畫兩次線

 function redraw() { var x1 = Math.random() * 200 var y1 = Math.random() * 200 var x2 = Math.random() * 200 var y2 = Math.random() * 200 l1.setAttribute("x1", x1) l1.setAttribute("y1", y1) l1.setAttribute("x2", x2) l1.setAttribute("y2", y2) l2.setAttribute("x1", x1) l2.setAttribute("y1", y1) l2.setAttribute("x2", x2) l2.setAttribute("y2", y2) c1.setAttribute("cx", x1) c1.setAttribute("cy", y1) c2.setAttribute("cx", x2) c2.setAttribute("cy", y2) }

 line { stroke-width: 2px }

 <svg width="220" height="220"> <marker id="m1" orient="auto" viewBox="0 0 20 6" markerWidth="10" markerHeight="3" refX="20" refY="3"> <rect x="0" y="0" width="20" height="6" fill="black" /> </marker> <marker id="m2" orient="auto" viewBox="0 0 20 6" markerWidth="10" markerHeight="3" refX="0" refY="3"> <rect x="0" y="0" width="20" height="6" fill="black" /> </marker> <mask id="mask"> <line id="l2" x1="20" y1="20" x2="200" y2="80" marker-end="url(#m1)" marker-start="url(#m2)" stroke="white" /> </mask> <circle id="c1" cx="200" cy="80" r="5" fill="blue" /> <circle id="c2" cx="20" cy="20" r="5" fill="blue" /> <line id="l1" x1="20" y1="20" x2="200" y2="80" mask="url(#mask)" stroke="black" /> </svg> <button onclick="redraw()">redraw</button>

Answer 2

曾經有一種黑客的方法是使用縮放到您的線條大小的圓形圖案作弊。 不完美，但取決於您的用例：

 <svg width="200" height="200" viewbox="0 0 200 200"> <defs> <pattern id="patt" width="1" height="1" patternContentUnits="objectBoundingBox"> <rect x="0" y="0" width="1" height="1" fill="cyan" /> <circle cx=".5" cy=".5" r=".4" fill="blue" /> </pattern> </defs> <g id="hand-drawn"> <line x1="40" y1="40" x2="100" y2="100" stroke="red" stroke-width="2" /> <line x1="54.1" y1="54.1" x2="85.9" y2="85.9" stroke="green" stroke-width="2" /> </g> <g id="circle-pattern"> <line x1="80" y1="60" x2="200" y2="100" stroke="url(#patt)" stroke-width="2" /> <line x1="150" y1="10" x2="100" y2="120" stroke="url(#patt)" stroke-width="2" /> <line x1="0" y1="100" x2="150" y2="100" stroke="url(#patt)" stroke-width="2" /> <line x1="0" y1="100" x2="150" y2="101" stroke="url(#patt)" stroke-width="2" /> <g> </svg>

當然，這只為您提供了一種顯示距離末端特定百分比的線的方法，而不是精確的像素值。 希望這能給你一些想法。

請注意，這有點問題 - 它不適用於水平線或垂直線……您必須將它們渲染為矩形或路徑並使用填充而不是筆划。