Wie kann ich ein Inline-svg zum umgebenden Text ausrichten?

jsfiddle: https://jsfiddle.net/Lzojtd5w/1/

<p>WXÄ<svg width="0.5em" height="1em" viewBox="0 0 50 100"><polygon points="0,0 0,100 50,100 50,0" fill="currentColor"/></svg>gX</p>

<p>WXÄ<svg width="0.5em" height="0.8em" viewBox="0 0 50 80"><polygon points="0,0 0,80 50,80 50,0" fill="currentColor"/></svg>gX</p>

<p>WXÄ<svg width="0.5em" height="1,2em" viewBox="0 0 50 120"><polygon points="0,0 0,120 50,120 50,0" fill="currentColor"/></svg>gX</p>

Das schwarze Rechteck ist irgendwie ausgerichtet. Wie bekomme ich es so ausgerichtet, dass es die Textzeile vertikal komplett ausfüllt?

1 Antwort

karotte1386824

15.05.2023, 13:24

Du kannst das schwarze Rechteck mit dem css-property "vertical-align" ausrichten. Gib dem svg-element eine Klasse, z.B, "icon" und setze "vertical-align: middle" in der CSS-Datei für diese Klasse, Das sollte das svg-element in der mitte der textzeile ausrichten. Beispiel: CSS: .icon { vertical-align: middle; } HTML:

wxägX

Ähnliche Fragen

SVG-Favicon benutzt kein CSS?

Guten Tag,

ich möchte folgendes (Logo.svg) SVG-Element als Favicon setzen:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
     x="0px" 
     y="0px" 
     width="1134px" 
     height="702px" 
     viewBox="-36.12 -144.12 1134 702"
     enable-background="new -36.12 -144.12 1134 702" 
     xml:space="preserve">
    <polygon fill="red" points="556.56,0.84 574.8,39.96 193.68,445.56 18.24,445.8 0.24,406.32 459.48,56.04 "/>
    <polygon fill="red" points="801.479,0.84 819.72,39.96 438.6,445.56 263.16,445.8 245.16,406.32 704.399,56.04 "/>
    <polygon fill="red" points="1045.319,1.8 1063.56,40.92 682.439,446.52 507,446.76 489,407.28 948.239,57 "/>
    <polygon fill="blue" points="381.709,0.84 556.56,0.84 175.44,406.2 0.24,406.32 "/>
    <polygon fill="blue" points="626.63,0.84 801.479,0.84 420.36,406.2 245.16,406.32 "/>
    <polygon fill="blue" points="870.47,1.8 1045.319,1.8 664.2,407.16 489,407.28 "/>
</svg>

Jedoch verändert sich die Farbe nicht, sondern bleib nur schwarz.

Ich füge das Element im head so hinzu:

<link rel="icon" type="image/svg+xml" href="/Media/Images/Logo.svg">

...zur Frage

Warum wird dieses SVG im CSS/HTML abgeschnitten?

Hallo,

ich habe ein SVG in mein HTML-Gerüst eingesetzt und mit CSS gestaltet. Weiß jemand, warum das SVG abgeschnitten wird?

Im SVG-Code habe ich eine stroke-width="2.5" angegeben. Je dünner desto weniger fällt das Abschneiden auf. Das SVG selbt ist mit width und height bei 100%. Selbst ein übergeordnetes DIV mit einem padding bewirkt nichts.

Das SVG scheint sich selbst nur ohne Linienstärke des Kreises zuzulassen. Das Bild unten ist nur zum Verständnis. Kein Screenshot aus dem Html-Ergebnis.

<div class="imgBox">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 96.125 96.125" enable-background="new 0 0 96.125 96.125" xml:space="preserve">
<pattern  x="-2" y="98" width="69" height="69" patternUnits="userSpaceOnUse" id="Polka_Dot_Pattern" viewBox="2.125 -70.896 69 69" overflow="visible"></pattern>
<circle id="Kreis" fill="#ffffff" fill-opacity=.1 stroke="#ffffff" stroke-width="2.5" cx="48.063" cy="48.063" r="47.813"/>
</svg>
</div>

...zur Frage

SVG in HTML einbinden geht nicht?

Guten Tag Gutefrage-Community,

wie im Titel schon steht, habe ich das Problem, dass ich eine SVG-Datei nicht in meine HTML-Datei einbinden kann. Dies geht in keiner von mir erstellen HTML-Datei. Ich versuche es wie folgt einzubinden:

<img src="value.svg">

Die SVG-Datei sieht wie folgt aus:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 400 400">
  <image id="v" x="5" y="5" width="390" height="390" xlink:href="..."/>
</svg>

...zur Frage

Wie kann man eine SVG-Datei in CSS nach links zentrieren?

Hallo,

ich möchte gerne eine SVG-Datei in meiner Webseite einbinden. Ich habe diese auch schon über <object> in HTML eingefügt.

Das object hat die Klasse Welt und ist in CSS hinterlegt. Dort habe ich width und height auf 75%. Nun wird mir die SVG aber so ziemlich mittig auf der Webseite angegeben.

Wie kann ich diese nach links positionieren, damit ich rechts z.B. einen Text scheiben kann?

HTML:

<object class="Welt" data="BluePlanet.svg" type="image/svg+xml"></object>

CSS:

.Welt {
  width: 75%;
  height: 75%;
}

Danke schon einmal im Voraus. :)

...zur Frage

HTML/CSS hintergrund gesplittet Schwarz weiß?

Hallo,

ich möchte den Hintergrund auf meiner Website gesplittet weiß mit einer Ecke schwarz haben.

(gewollte Ansicht der Seite)

Aktuell benutzte ich ein riesieges svg Rechteck um den Teil einzufärben und limmitiere die ansicht der seite auf die gewollte Ansicht, scheint mir aber eher ineffizient zu sein, gibts da eine bessere Methode das zu lösen?

(gesamt Ansicht der seite)

Hier der aktuelle code:

(die Koordinaten sind wahrscheinlich etwas merkwürdig weil ich sie mir von einem Programm passgenau hab berechnen lassen)

HTML:

   <svg class="black_bg">
      <rect fill="rgba(0,0,0,1)" id="Rechteck_29" rx="0"  ry="0" x="0" y="0" width="1175" height="1649">
      </rect>
   </svg>

css:

.black_bg {
   width: 1175px;
   height: 1649px;
   position: absolute;
   overflow: visible;
   transform: matrix(1,0,0,1,1744.92,-218.8203) rotate(24deg);
   transform-origin: center;
}

...zur Frage

CSS vh und vw Units?

width: 50vh = 25% des Screens

height: 50vh = 50% des Screens

-----

height: 50vw = 100% des Screens

width: 50vw = 50% des Screens

Ich versuche gerade view-height und view-width zu verstehen und habe paar Sachen getestet (siehe oben).

Was ist das?

Ich habe es schon beim YouTube Video nicht verstanden. Kann mir jemand kurz und knapp (für anfänger) den Unterschied erklären und was was macht? Seit den Tests oben habe ich gar keinen Plan mehr ^^

...zur Frage

Zugriff auf svg Element in HTML gibt immer "null" zurück?

Hallo zusammen,

folgendes Problem:

Ich möchte aus meinem javascript Code zu laufzeit auf meine sonarGrafik.svg zugreifen können um deren Elemente zu manipulieren (oder neue hinzufügen zu können).

So sieht erstmal der ganze HTML Code aus:

<!DOCTYPE html>
<html>
<head>
    <title>Arduino Daten</title>
    <link rel="icon" href="data:,">
    <script src="scripts/script.js"></script>
    <link rel="stylesheet" href="styles/style.css"> 
</head>
<body>
    <object id = "svgObject" data="styles/sonarGrafik.svg" type="image/svg+xml"></object>
</body>
</html>

Der betroffene Teil in meinem javascript Code:

function insertDots(cx, cy) {
    const svgObject = document.getElementById("svgObject");
    console.log(svgObject.contentDocument) // hier erhalte ich in der Console immer "null"


    svgObject.addEventListener("load", function() {
        if (svgObject && svgObject.contentDocument) {
            const sonarSVG = svgObject.contentDocument.getElementById("sonar");
            console.log(sonarSVG);
        }
    });
}

(Die funktion insertDots(cx, cy) wird alle paar sekunden aufgerufen und ich erhalte in der Browser Konsole immer nur null. Dementsprechend ist die if Bedienung darunter auch nie wahr)

In meiner .svg Datei gibt es definitv die id= "sonar":

<svg id="sonar" width="700" height="700" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="100%" fill="rgba(128, 128,   128, 0.25)" />
</svg>

So sieht meine Ordnerstruktur aus:

Website
│   SonarVisuallisierung.html
│
├── scripts
│       script.js
│
└── styles
        style.css
        sonarGrafik.svg

Gibt es irgendwo einen Fehler oder eine andere Möglichkeit auf die Elemente der .svg Datei über das script zuzugreifen? (Den Inhalt der .svg will ich ausgelagert lassen und nicht in das HTML einfügen wegen der Übersichtlichkeit)

Danke für alle Lösungsvorschläge.

...zur Frage

Python tkinter countdown wie?

Hallo ich will einen Aim-trainer mit Python tkinter schreiben. Also ich habe das mit einem Button gemacht und wenn man drauf drückt verändert sich die Position aber damit das nicht so einfach ist soll der Button wenn man ihn nicht in 3 Sekunden gedrückt hat verschwinden und man hat verloren. Das mit dem Button habe ich schon gemacht aber ich weiß nicht wie ich das machen soll das der nach 3 sekunden verschwindet wenn man ihn nicht gedrückt hat.

Hier das Script:

import random

from tkinter import *

import time

points = 0

root = Tk()

root.geometry("1920x1080")

root.title("Aim-trainer")

root.configure(bg='#2E2E2E')

points = int(points)

point = Label(root, bg='#2E64FE', text="0", width=50, height=8, font=('Arial', 24))

point.place(x=500, y=10, height=50, width=50)

def forget():

btn.place_forget()

def btnn():

btn.place(x=90, y=30)

forget()

btn = Button(root, text="-", bg="black", command=btnn)

btn.place(x=0, y=0)

mainloop()

...zur Frage

HTML CSS Website Footer wird im Container angezeigt, obwohl er nicht drin ist?

Hallo,

Ich "programmiere" gerade ein wenig mit HTML und CSS und baue eine Website mit einem Head, einer Main und einem Footer. Mein Problem ist, dass alle Elemente der Website nach der Main (bei mir heißt sie "Container") trotzdem noch innerhalb des Containers angezeigt werden. Somit ist bei mir der Footer im Container Main, obwohl der Container vorher schon geschlossen wurde.

-------------------------------------------------------------------------------------

HTML CODE:

<!DOCTYPE html>
<html>
 <head>
  <title>Aufgabe 1</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" type="text/css" href="style.css" />
 </head>
 <body>
  <header>
   <header1 class="item1">
    <h2>FeWos</h2>
   </header1>
  </header>
  <div" class="container">
   <div class="b1">
    <div>
     <h1>Item 1</h1>
    </div>
    <div class="bild1">
     <img src="pingu.png" width="50%" height="50%">
    </div>
   </div>
   <div class="b1"><br>Box 2</div>
   <div class="b1"><br>Box 3</div>
   <div class="b1"><br>Box 4</div>
   <div class="b1"><br>Box 5</div>
   <div class="b1"><br>Box 6</div>
  </div>
  <footer>
   <p>Hallo</p>
  </footer>
 </body>
</html>

----------------------------------------------------------------------------------------------------

CSS CODE:

body {
  margin: 0;
}
header {
  height: 120px;
  background-color: rgb(43, 43, 43);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.container {
  border: 3px solid;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 90px;
  padding: 90px;
}
.b1 {
  display: flex;
  background-color: rgb(93, 161, 224);
  width: 30%;
  height: 500px;
  flex-grow: 1;
  transition: transform 0.2s ease-out;
  border-radius: 20px;
}
.b1:hover {
  transform: scale(1.05);
}
.bild1 {
  padding-left: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 20px;
  width: auto;
  height: auto;
}
footer {
  background-color: rgb(43, 43, 43);
  width: 100%;
  height: 120px;
  padding: 0px;
}

----------------------------------------------------------------------------

Wie man sehen kann wird der "container" mit </div> abgeschlossen, aber der Footer ist trotzdem im Container. Hoffe mir kann jemand bei dem Problem helfen.

Auf dem Bild kann man das auch ganz gut sehen. Das anthrazit farbige soll der Footer sein und dieser liegt innerhalb des Containers, welcher zur Sichtbarkeit eine Umrandung hat.
Würde mich echt freuen, wenn mir jemand weiterhelfen kann. Hab auch Chat GBT schon gefragt, aber Chat GPT sagt, dass der Code ganz normal ist und, dass der Footer nicht im Container ist.

...zur Frage

Hilfe mit CSS Flexbox?

wie kann ich die 4 Bilder wie folgt anordnen?

ich code noch nicht so lange, doch hier der code den ich bis jetzt habe. Also bitte nicht auslachen ^^

CSS:

/* Dienstleistungen*/

.dienstleistungen{

justify-content: center;

width: 75%;

}

.mofa-zündung-service{

height: 50%;

width: auto;

}

.mofa-getriebe-revisionen{

height: 25%;

width: auto;

align-self: top;

}

.mofa-vergaser-tuning{

height: 25%;

width: auto;

align-self: top;

}

.mofa-kolben-ersatzteile{

height: 25%;

width: 50%;

}

/*!Dienstleistungen*/

HTML:

<h3>Dienstleistungen</h3>

<li><a href="#">Service</a></li>

<li><a href="#">Revisionen</a></li>

<li><a href="#">Tuning</a></li>

<li><a href="#">Ersatzteile</a></li>

</div>

so sieht es bis jetzt aus:

Ich verstehe vor allem nicht wie ich die Bilder untereinander und gleichzeitig neben einem anderen Bild anordnen kann. (kolben)

...zur Frage

HTML/CSS-Button(Bild ändern)?

Hallo, ich arbeite gerade an einen Button. Aber wie kann ich dieses Herz durch ein Bild ersetzten?

.icon{

background-color: white;

color: #00472d;

border: none;

font-size: 2rem;

padding: 0.5em;

line-height: 1;

width: 2em;

transition: border-radius 2s ease;

}

.icon:hover{

background-color:#00472d;

color: white;

border-radius: 50%;

...zur Frage

Java Processing Game over Screen erstellen?

Hey ich habe eine Version von Pong erstellt um mich ein wenig rumzuprobierem. Demnach ist es weder schön noch besonders ausgereift. Ich habe folgendes gecodet und Frage mich wie ich auf Knopfdruck ein neues Spiel starten kann. Ich hab schon was implementiert was aber nicht funktioniert hatt. Vielleicht ist der Ansatz ja auch richtig. Vielen Dank:

int screen = 0;
int end = 0;
float x = 0;
float y = 0;

int xball = 500;
int yball = 500;
int xdir = 1;
int ydir = 1;



void setup(){
  
 fullScreen();
 smooth();
  
}

void draw(){
 background(38,30,38);
 strokeWeight(5);
 stroke(39,255,36);
 fill(39, 181, 36);
 rect(25,(mouseY/25)*25,25,25);
 rect(25,((mouseY/25)*25)+25,25,25);
 rect(25,((mouseY/25)*25)-25,25,25);
 rect(25,((mouseY/25)*25)-50,25,25);
 rect(25,((mouseY/25)*25)+50,25,25);
  
  
 stroke(255,39,36);
 fill(181,39,36);
  
 
  
  
 fill(255,39,36);
 stroke(181,39,36);
 rect((xball/25)*25,(yball/25)*25,25,25);
 xball = xball+xdir*4;
 yball = yball+ydir*2;
  
  
  
  if (xball > width-25){
   xdir = xdir * -1;
  }  
 
 if (xball < 25){
  screen = 1;
 }
 
 if (xball < 75){
  if (xball > 25){
  if (yball > ((mouseY/25)*25)-50){
   if(yball < ((mouseY/25)*25)+50){
   xdir = xdir * -1;
  }}}}
  
  
 if (yball > height-25 || yball < 25){
   ydir = ydir * -1;
  }
   
 if (screen > 0){
  noStroke();
  fill(0);
  rect(0,0,width,height);
  stroke(255);
  fill(255);
  textSize(150);
  text("Game Over",width/4-100,height/2);
  fill(150);
  stroke(150);
  text("again?",width/4+100,height/2+260);
  end = 1;
 }
   
}



void mouseClicked (){
  
 background(38,30,38);
 if(mouseX > width/4+100){
  if(mouseX < width/4+600){
   if(mouseY > height/2+260){
    if(mouseY < height/+310){
     if(end > 0){
      screen = -1;
      end = 0;
      xball = 500;
      yball = 500;
      xdir = 1;
      ydir = 1;
      x = 0;
      y = 0;
      
 
 
 }}}}}
  
}

...zur Frage

Wie kann ich mit Javascript eine Zeile einer (HTML)Tabelle auslesen?

<table width="840px" height="100px" border="solid">
<tr>
<td width="270px" align="center" id="eineID">
50
</td>
<td>
<script type="text/javascript">
//auslesen der 50
</script>
</td>
</tr>
</table>

...zur Frage

WetterApp mit HTML, Css und C# über Blazor Server App?

Hallo undzwar bin ich neu in C# und möchte über die Blazor Server App eine Wetter-App programmieren, allerdings fehlt mir dazu noch der Code, da ich nicht weiß wie ich anfangen soll. Ich möchte dass mein "SearchIcon" welcher in HTML hinterlegt ist als suchbutton fungiert, damit ich die Städte suchen kann und über API möchte ich, dass mir dann die jeweiligen Temperaturen angegeben werden. Kann mir wer helfen und gegebenenfalls einen Code dafür geben.

Hier mein HTML code:

</div>

</div>

<div>

</div>

</div>

<img src="/images/image1.png" width="75" height="75" class="imageline "

<img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 5px; margin-right: -5px;"

<img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 22px; margin-right: -5px;"

<img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 5px; margin-right: -14px;"

</div>

<div>

<p style="color:black;"class="line0 title margin-left ">Monday</p>

<p style="color:black;"class="line0 title margin-left ">Tuesday</p>

<p style="color:black;"class="line0 title margin-left ">Wednesday</p>

<p style="color:black;"class="line0 title margin-left ">Thursday</p>

<p style="color: black;"class="line0 title margin-left ">Friday</p>

</div>

<div>

<p class="speed">Humidity</p>

</div>

<div>

<p class="speed">Wind Speed</p>

</div>

</body>

hier mein Css code:

.backgroundimage {

background-image: url('../images/sun_background.png');

background-attachment: fixed;

background-repeat: no-repeat;

background-size: cover;

}

.cloud-background {

background-image: url('../images/cloud.png');

/* Füge hier die gewünschten Hintergrundbilderigenschaften hinzu */

}

.card {

width: 90%;

max-width: 470px;

color: #fff;

margin: 10px auto 0;

border-radius: 20px;

}

.search{

width: 100%;

display: flex;

align-items: center;

justify-content: space-between;

}

.search input{

border: 0;

outline: 0;

background: #ebfffc;

color: #555;

padding: 10px 25px;

height: 60px;

border-radius: 30px;

flex: 1;

margin-right: 16px;

font-size: 18px;

}

.search button{

border: 0;

outline: 0;

background: #ebfffc;

border-radius: 60%;

width: 60px;

height: 60px;

cursor: pointer;

}

.weather-icon{

margin-bottom: -30px;

}

.weather h1 {

font-size: 80px;

font-weight: 500;

color: floralwhite;

}

.weather h2 {

font-size: 40px;

font-weight: 400;

margin-top: -10px;

color: floralwhite;

}

.details {

display: flex;

align-items: center;

justify-content: space-between;

padding: 0 20px;

margin-top: 50px;

}

.col {

display: flex;

align-items: center;

text-align: left;

margin-top: 150px;

}

.col img {

width: 20px;

margin-right: 20px;

margin-bottom: 70px

}

.humidity, .wind{

font-size: 28px;

margin-top: -6px;

color: floralwhite;

}

.speed{

font-weight: bold;

}

.temp {

margin-bottom: 20px;

display: flex;

justify-content: center;

}

.search button img{

width: 55%;

}

.center {

display: flex;

justify-content: center;

}

.top-left{

display: flex;

justify-content:left

}

.top-left

{

margin-left: 10px;

}

.margin-top{

margin-top: 20px;

}

.hr1 {

width: 390px;

height: 2px;

color: black;

}

.line{

margin-bottom: -100px;

margin-top: 10px;

}

.line1{

margin-top: 30px;

margin-bottom: -20px;

}

.line0{

margin-top: 70px;

margin-bottom: -90px;

font-size: 14px;

font-weight: bold;

color: black;

}

.imageline {

margin-top: 5px;

margin-bottom: -90px;

}

.imagesMain {

padding: 0;

margin-left: auto;

margin-right: auto;

margin-top: 20px;

text-align: center;

}

.imagesMain img {

height: 400px;

width: 300px;

vertical-align: middle;

}

.title {

display: inline-block;

color: lightgray;

}

.margin-left{

margin-left: 14px;

}

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen