Comment faire une SVG « ligne » avec une bordure autour d'elle?

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

  •  27-10-2019
  •  | 
  •  

Question

J'ai un petit widget svg dont le but est d'afficher une liste d'angles (voir l'image).

En ce moment, les angles sont des éléments de ligne, qui ont seulement un accident vasculaire cérébral et sans remplissage. Mais maintenant, je voudrais avoir un « remplissage à l'intérieur » couleur et une « course / frontière » autour d'elle. Je devine que l'élément de ligne ne peut pas gérer cela, que dois-je utiliser à la place?

Notez que la ligne de la course endcap de la ligne est arrondie. Je voudrais maintenir cet effet dans la solution.

Ligne Angle 

<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>
Était-ce utile?

La solution

Ajouter une seconde ligne, avec les mêmes coordonnées, mais plus mince largeur de ligne: 

<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"/>

Autres conseils

Il semble que votre ligne est opaque, de sorte que vous pouvez simplement tracer une ligne mince avec la couleur « à l'intérieur » au-dessus de la ligne plus épaisse avec la couleur « en dehors ».

Vous pouvez utiliser un rect avec des coins arrondis, mais le calcul change un peu: 

  <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/

J'ai trouvé une solution élégante inspirée par à l'article W3C sur le remplissage et caressant . Au fond, vous vous déplacez chemin vers des définitions et d'utiliser cette définition pour dessiner deux éléments: 

<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>

En utilisant <defs> et <use> vous pouvez changer seul élément de chemin pour mettre à jour les deux lignes. jsFiddle démo

Vous pouvez aussi le faire avec un chemin, même si elle est difficile autour des morceaux ronds: 

<!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>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top