Inline-SVG-Symbole werden in Viewbox nicht angezeigt

Question

Das hat sich für mich als zu schwierig erwiesen, so dass ein anderes Augenpaar immens helfen würde!

Ich habe einige SVGs in meiner HTML-Datei, aber ich weiß nicht, warum sie nicht angezeigt werden. Ich habe versucht, sie zu finden, indem ich jedes ihrer viewBox-Attribute manipuliere, aber ich war noch nicht erfolgreich.

Irgendwelche Ideen, warum ich sie nicht sehen kann?

body { 
 
    background-color: #ddd; 
 
} 
 
.st1 { 
 
    fill: #FFFFFF; 
 
} 
 
.st15 { 
 
    fill: #000000; 
 
} 
 
p { 
 
    width: 600px; 
 
} 
 
span svg { 
 
    width: 35px; 
 
    height: 40px; 
 
    border: 1px solid red; 
 
    float: left; 
 
    padding: 0; 
 
    margin: 0; 
 
}

<!-- SVG Sprite, which is hidden, we reference the individual symbols/icons later --> 
 
<svg style=" display: none; position: absolute;" <!-- width: 20px; height: 20px; " --> <!-- width="0 " height="0 " --> version="1.1 " xmlns="http://www.w3.org/2000/svg " xmlns:xlink="http://www.w3.org/1999/xlink "> 
 
     <defs> 
 
      <symbol id="icon-plus " viewBox="0 0 40 40 " preserveAspectRatio="xMinYMin " aria-labelledby="title desc " role="img "> 
 
       <title>plus sign</title> 
 
       <!-- <path class="path1 " d="M11 1l-5 5h-3l-3 4c0 0 3.178-0.885 5.032-0.47l-5.032 6.47 6.592-5.127c0.919 2.104-0.592 5.127-0.592 5.127l4-3v-3l5-5 1-5-5 1z "></path> --> 
 
\t \t \t \t <path class="st1 " d="M342.5,21.5v2c0,0.3-0.1,0.5-0.3,0.7c-0.2,0.2-0.4,0.3-0.7,0.3h-4.4V29c0,0.3-0.1,0.5-0.3,0.7 c-0.2,0.2-0.4,0.3-0.7,0.3h-2c-0.3,0-0.5-0.1-0.7-0.3c-0.2-0.2-0.3-0.4-0.3-0.7v-4.4h-4.4c-0.3,0-0.5-0.1-0.7-0.3s-0.3-0.4-0.3-0.7 v-2c0-0.3,0.1-0.5,0.3-0.7s0.4-0.3,0.7-0.3h4.4V16c0-0.3,0.1-0.5,0.3-0.7c0.2-0.2,0.4-0.3,0.7-0.3h2c0.3,0,0.5,0.1,0.7,0.3 
 
c0.2,0.2,0.3,0.4,0.3,0.7v4.4h4.4c0.3,0,0.5,0.1,0.7,0.3C342.4,21,342.5,21.2,342.5,21.5 "/> 
 
\t \t \t </symbol> 
 
\t \t \t 
 
\t \t \t <symbol id="icon-minus " viewBox="0 0 40 40 " preserveAspectRatio="xMinYMin " aria-labelledby="title desc " role="img "> 
 
       <title>minus</title> 
 
       <!-- <path class="path1 " d="M11 1l-5 5h-3l-3 4c0 0 3.178-0.885 5.032-0.47l-5.032 6.47 6.592-5.127c0.919 2.104-0.592 5.127-0.592 5.127l4-3v-3l5-5 1-5-5 1z "></path> --> 
 
\t \t \t \t <path class="st15 " d="M318.6,21.3v2.4c0,0.3-0.1,0.6-0.4,0.9c-0.2,0.2-0.5,0.4-0.9,0.4h-15.5c-0.3,0-0.6-0.1-0.9-0.4 c-0.2-0.2-0.4-0.5-0.4-0.9v-2.4c0-0.3,0.1-0.6,0.4-0.9c0.2-0.2,0.5-0.4,0.9-0.4h15.5c0.3,0,0.6,0.1,0.9,0.4 C318.5,20.7,318.6,21,318.6,21.3 "/> 
 
\t \t \t </symbol> 
 
\t 
 
     </defs> 
 
    </svg> 
 

 
    <!-- Here we display the individual icons with referencing their symbol id --> 
 
\t <p> 
 
\t \t <span> 
 
\t \t \t <svg> 
 
\t \t \t \t <use xmlns:xlink="http://www.w3.org/1999/xlink " xlink:href="#icon-plus "></use> 
 
\t \t \t </svg> 
 
\t \t </span> 
 
\t \t 
 
\t \t <span> 
 
\t \t \t <svg> 
 
\t \t \t \t <use xmlns:xlink="http://www.w3.org/1999/xlink " xlink:href="#icon-minus "></use> 
 
\t \t \t </svg> 
 
\t \t </span> 
 

 
\t \t Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam convallis arcu eu ante vestibulum, non dictum felis pellentesque. 
 
\t \t Curabitur non risus rhoncus tellus vehicula pellentesque. Pellentesque commodo enim scelerisque quam accumsan, id fermentum augue condimentum. 
 
\t \t Praesent sed imperdiet quam. Cras dapibus orci maximus, aliquam turpis sed, laoreet sapien. Curabitur feugiat pulvinar orci, sit amet venenatis nibh consequat vel. 
 
\t \t Vivamus vehicula eget ex non semper. Donec sit amet luctus neque. 
 
\t \t Vestibulum aliquam elit justo, in pretium neque efficitur ac. Proin tellus diam, finibus sit amet tristique in, commodo ac metus. 
 
\t \t Mauris eget erat ut erat rutrum ultricies sed non leo. Duis in turpis magna. 
 
\t \t Praesent efficitur, odio congue venenatis tempor, sem augue sollicitudin orci, eu convallis enim diam et eros. 
 
\t \t Vivamus nulla odio, eleifend vitae pharetra non, lobortis at nulla. 
 
\t </p> 
 
    <!-- <svg> 
 
     <use xmlns:xlink="http://www.w3.org/1999/xlink " xlink:href="#icon-fire "></use> 
 
    </svg> -->

Answer 1

Das viewBox Attribut teilt dem Browser mit, wo im Koordinatensystem Ihrer SVG Inhalte befinden.

Sie haben es derzeit auf "0 0 40 40" eingestellt, was von (0,0) bis (40,40) bedeutet. Aber sieh dir die erste Koordinate deiner <path> an: (342.5, 21.5). Sie sind also mit Ihrer ViewBox deutlich abseits.

Es gibt mehrere Möglichkeiten, nach vorn, einschließlich, aber nicht beschränkt auf:

1. Legen Sie das SVG in einen Vektor-Editor und bewegen und Ihren Weg Größe ändern, so dass es in der 40x40 viewBox passt.

2. Laden Sie das SVG in einen Vektoreditor und bestimmen Sie die Abmessungen mithilfe der Editordimensionsanzeigen. Verwenden Sie diese zum Festlegen der ViewBox.

3. Beginnen Sie mit einer ViewBox im ungefähren Bereich und passen Sie sie manuell an, bis Sie sie iterativ auf die richtige Größe verkleinern.

4. Laden Sie es in einen Browser und verwenden Sie getBBox(), um die richtigen Werte für die ViewBox zu finden.

Beachten Sie auch, dass, wenn Sie nicht wählen, Symbole an oder nahe dem Ursprung positioniert zu verwenden (0,0) Sie müssen wahrscheinlich auch hinzufügen viewBox Attribute den SVGs, die die <use> Elemente haben.