Wie erstellt man eine SVG -Linie mit einem Rand um sie herum?

StackOverflow https://stackoverflow.com/questions/8845426

  •  27-10-2019
  •  | 
  •  

Frage

Ich habe ein kleines SVG -Widget, dessen Ziel es ist, eine Liste von Winkeln anzuzeigen (siehe Bild).

Im Moment sind die Winkel Linienelemente, die nur einen Schlaganfall und keine Füllung haben. Aber jetzt möchte ich eine "Innenfüllung" -Farbe und einen "Schlaganfall/Rand" haben. Ich vermute, das Zeilenelement kann das nicht bewältigen. Was soll ich stattdessen verwenden?

Beachten Sie, dass die Linienendkapsel des Hubs der Linie abgerundet ist. Ich möchte diesen Effekt in der Lösung beibehalten.

Angle Line

<svg height="160" version="1.1" viewBox="-0.6 -0.6 1.2 1.2" width="160" xmlns="http://www.w3.org/2000/svg">
  <g>
    <g>
      <circle class="sensorShape" cx="0" cy="0" fill="#FFF" r="0.4" stroke="black" stroke-width="0.015"/>
      <line stroke="black" stroke-width="0.015" x1="0" x2="0" y1="-0.4" y2="0.4"/>
      <line stroke="black" stroke-width="0.015" x1="-0.4" x2="0.4" y1="0" y2="0"/>
    </g>
    <g class="lsNorthAngleHandsContainer">
      <line data-angle="348" stroke="red" stroke-linecap="round" stroke-width="0.04" transform="rotate(348)" x1="0" x2="0" y1="0" y2="-0.4"/>
      <text font-size="0.08" transform="translate(-0.02316467632710395,-0.45125904029352226)">
        348
      </text>
    </g>
  </g>
</svg>
War es hilfreich?

Lösung

Fügen Sie eine zweite Zeile mit denselben Koordinaten, aber dünnerer Linienbreite hinzu:

<g class="lsNorthAngleHandsContainer">
  <line data-angle="348" stroke="red" stroke-linecap="round" stroke-width="0.04" transform="rotate(348)" x1="0" x2="0" y1="0" y2="-0.4"/>
  <line data-angle="348" stroke="yellow" stroke-linecap="round" stroke-width="0.025" transform="rotate(348)" x1="0" x2="0" y1="0" y2="-0.4"/>

Andere Tipps

Es sieht so aus, als ob Ihre Linie undurchsichtig ist, sodass Sie mit der "Innenfarbe" mit der "Außenfarbe" nur eine dünne Linie zeichnen können.

Sie könnten ein Rekt mit abgerundeten Ecken verwenden, aber die Mathematik ändert sich ein wenig:

  <rect data-angle="348" stroke="red" stroke-linecap="round" stroke-width="0.02" fill="#FF0" transform="rotate(348, 0, 0)" x="-0.02"  y="-0.4" width=".06" height=".4" rx=".03" ry=".03"/>

http://jsfiddle.net/RNAUP/

Ich fand eine elegante Lösung, die von inspiriert wurde von Illustration zu W3C -Artikel über Füllen und Streicheln. Grundsätzlich bewegen Sie den Pfad zu Definitionen und verwenden diese Definition, um zwei Elemente zu zeichnen:

<svg width="200" height="200" viewBox="0 0 100 100">
    <defs>
        <line id="line1" x1="25" x2="75" y1="25" y2="75"/>
    </defs>
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#line1" class="stroke"></use>
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#line1" class="line"></use>
</svg>

Durch die Nutzung <defs> und <use> Sie können nur das Pfadelement ändern, um beide Zeilen zu aktualisieren. Jsfiddle Demo

Sie können es auch mit einem Weg tun, obwohl es in den runden Teilen schwierig ist:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
  <!-- I often use entities to be able to change lot of numbers at once in static SVG, also kind of makes the paths more readable.
       Obvisouly, if you're generating the path you can use the same variables in code to append to d -->
  <!ENTITY handFill "0.01">
  <!ENTITY handFill2 "0.02"><!-- Should be 2 * handFill to be centered -->
  <!ENTITY handStroke "0.005"><!-- Should be less than handFill2 to not hide fill -->
]>
<svg height="160" version="1.1" viewBox="-0.6 -0.6 1.2 1.2" width="160" xmlns="http://www.w3.org/2000/svg">
  <g>
    <g>
      <circle class="sensorShape" cx="0" cy="0" fill="#FFF" r="0.4" stroke="black" stroke-width="0.015"/>
      <line stroke="black" stroke-width="0.015" x1="0" x2="0" y1="-0.4" y2="0.4"/>
      <line stroke="black" stroke-width="0.015" x1="-0.4" x2="0.4" y1="0" y2="0"/>
    </g>
    <g class="lsNorthAngleHandsContainer">
      <path d="
        M -&handFill;,0 l0,-0.4
        a &handFill;,&handFill; 0 0,1 &handFill2;,0
        l 0,0.4
        a &handFill;,&handFill; 0 0,1 -&handFill2;,0
      " stroke="red" stroke-linecap="round" stroke-width="&handStroke;" fill="yellow" transform="rotate(348)" />
      <text font-size="0.08" transform="translate(-0.02316467632710395,-0.45125904029352226)">
        348
      </text>
    </g>
  </g>
</svg>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top