SVG-Linie mit Verlaufslinie wird nicht gerade angezeigt

Question

Ich versuche, eine <hr> mit SVG zu replizieren. Jetzt funktioniert eine gerade Linie mit SVG perfekt, aber in der Sekunde, in der ich sie mit einem Gradienten streiche, wird sie nicht mehr in einer geraden Linie angezeigt.

Der folgende Code funktioniert, aber beachten Sie, y1 und y2 müssen 1 Einheit auseinander liegen. Wenn ich zum Beispiel y1 und y2 auf 210 setze, wird die Zeile verschwinden.

<defs> 
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> 
     <stop offset="0%" style="stop-color:rgba(0,0,0,0);stop-opacity:0" /> 
     <stop offset="50%" style="stop-color:rgba(0,0,0,0.75);stop-opacity:1" /> 
     <stop offset="100%" style="stop-color:rgba(0,0,0,0);stop-opacity:0" /> 
    </linearGradient> 
</defs> 
<line x1="40" y1="210" x2="460" y2="211" stroke="url(#grad1)" stroke-width="1" /> 

Ich bin wahrscheinlich nur einige offensichtliche Funktion der linearen Gradienten fehlt, und die Zeile sieht in Ordnung, aber ich würde viel lieber es nur gerade haben. Vielen Dank.

Answer 1

Sie werden immer durch den letzten Absatz ertappen in this part of the SVG specification

Stichwort objectBoundingBox sollte nicht verwendet werden, wenn die Geometrie des jeweiligen Elements keine Breite hat oder keine Höhe, wie bei einer horizontalen oder vertikalen Linie , selbst wenn die Linie eine tatsächliche Dicke aufweist, wenn sie betrachtet wird, weil sie eine Strichbreite ungleich Null hat, da die Strichbreite für Bounding-Box-Berechnungen ignoriert wird. Wenn die Geometrie des anwendbaren Elements keine Breite oder Höhe aufweist und objectBoundingBox angegeben ist, wird der angegebene Effekt (z. B. ein Farbverlauf oder ein Filter) ignoriert.

objectBoundingBox ist die Standardeinstellung für gradientUnits, so dass Sie gradientUnits = „userSpaceOnUse“ verwenden müssen, und dann die Werte an, geeignet zu sein für die verschiedenen Koordinatensystem.

Answer 2

Robert Longson gibt eine hervorragende Erklärung. Aber manchmal userSpaceOnUse ist ein Schmerz, weil es die Interpolation über die gesamte Zeichenfläche statt nur die Zeile verteilt.

Stattdessen können Sie den Werten eine kleine Menge hinzufügen, um sicherzustellen, dass die Bbox-Größe nicht Null ist.

Zum Beispiel

<line x1="40" y1="210" x2="460" y2="210.001" stroke="url(#grad1)" stroke-width="1" /> 

wird eine gerade Linie mit einem Gradienten ziehen.

Answer 3

Angenommen, Sie wollen nicht in Genauigkeit überhaupt, können Sie die Zeile auf einen gefüllten Pfad ändern, wie unten

<path d='M 40 209.5 L 460 209.5 L 460 210.5 L 40 210.5' fill='url(#grad1)' /> 

oder alternativ zu einem gefüllten rect wie unten

<rect x=40 y=209.5 width=420 height=1 fill='url(#grad1)' /> 

Es Interessant ist auch, dass dieses Problem nur vertikale und horizontale Linien betrifft. Schräge Linie wird korrekt angezeigt.