Firefox-Svg-Symbol verwandeln - CSS, Firefox, Svg, Symbol

Ich habe unerwartetes Verhalten in Firefox während der Verwendung von SVG-Symbolen und Position: absolut mit transform: translate ();

Dies scheint nur in Firefox zu passieren, nichtIE oder Chrome. Ich bin mir auch ziemlich sicher, dass ich dieses Problem vorher nicht hatte, also vielleicht ein neues Problem / Bug? Derzeit verwende ich 43.0.4 (Windows) und habe auch in 44.0.2 (Linux) getestet.

Im dieser Plunker Ich würde den Kartenzeiger, Kreis und Quadrat erwartenalle müssen zentral in der Begrenzungsbox positioniert sein. In Firefox ist der Kartenzeiger jedoch nicht korrekt positioniert. Der Kartenzeiger ist ein SVG-Symbol.

aktualisieren: Das Problem scheint sich nur dann zu ergeben, wenn das SVG mithilfe von svg {} als CSS-Selektor positioniert wird. Es funktioniert wie erwartet, wenn es über den Selektor .icon {} formatiert wird.

CODE:

#svg-sprite{
position: absolute;
width: 0;
height: 0;
}

.rect{
position: relative;
width: 400px;
height: 400px;
background: #f00;
}

svg{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
fill: #fff;
opacity: 0.5;
}

.circle{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background: #0f0;
border-radius: 50%;
opacity: 0.5;
}

.square{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
fill: #0f0;
opacity: 0.5;
}
<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>

<body>

<svg id="svg-sprite">
<symbol viewBox="0 0 42 60" id="map_pointer"><title>map_pointer</title><path d="M21 .254C9.52.254.178 9.594.178 21.076c0 11.153 19.208 37.167 20.026 38.27.187.25.483.4.796.4.313 0 .61-.15.796-.4.818-1.103 20.026-27.117 20.026-38.27C41.822 9.596 32.482.254 21 .254zM21 30c-4.92 0-8.924-4.003-8.924-8.924 0-4.92 4.003-8.923 8.924-8.923 4.92 0 8.924 4.002 8.924 8.923C29.924 25.996 25.92 30 21 30z"/></symbol>
</svg>

<p>SVG icon should be positioned in centre of rectangle. In Firefox this is not the case</p>

<div class="rect">
<svg class="icon"><use xlink:href="#map_pointer" /></svg>

<div class="circle"></div>

<svg class="square" width="200" height="200">
<rect width="200" height="200" />
</svg>
</div>
</body>

</html>

Antworten:

2 für die Antwort № 1

Ich habe gerade das CSS entfernt verwandeln von dem Svg dann arrangiere die oben und links. Es funktioniert auch in Firefox. Ich denke, es könnte die Antwort sein, die Sie erwarten.

#svg-sprite{
position: absolute;
width: 0;
height: 0;
}

.rect{
position: relative;
width: 400px;
height: 400px;
background: #f00;
}

svg{
position: absolute;
top: 25%;
left: 25%;
width: 200px;
height: 200px;
fill: #fff;
opacity: 0.5;
}

.circle{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background: #0f0;
border-radius: 50%;
opacity: 0.5;
}

.square{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
fill: #0f0;
opacity: 0.5;
}
<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>

<body>

<svg id="svg-sprite">
<symbol viewBox="0 0 42 60" id="map_pointer"><title>map_pointer</title><path d="M21 .254C9.52.254.178 9.594.178 21.076c0 11.153 19.208 37.167 20.026 38.27.187.25.483.4.796.4.313 0 .61-.15.796-.4.818-1.103 20.026-27.117 20.026-38.27C41.822 9.596 32.482.254 21 .254zM21 30c-4.92 0-8.924-4.003-8.924-8.924 0-4.92 4.003-8.923 8.924-8.923 4.92 0 8.924 4.002 8.924 8.923C29.924 25.996 25.92 30 21 30z"/></symbol>
</svg>

<p>SVG icon should be positioned in centre of rectangle. In Firefox this is not the case</p>

<div class="rect">
<svg class="icon"><use xlink:href="#map_pointer" /></svg>

<div class="circle"></div>

<svg class="square" width="200" height="200">
<rect width="200" height="200" />
</svg>
</div>
</body>

</html>


-1 für die Antwort № 2

Überschrift

Hier habe ich einige Änderungen an Ihrem Code vorgenommen und das funktioniert gut, einige css3-Eigenschaften benötigen herstellerspezifische Eigenschaftswerte wie Transformationsanforderungen -moz-transform im mozilla arbeiten -o-transform in der Oper arbeiten -webkit-transform um mit safari und chrome zu arbeiten und in einigen kritischen fällen müssen sie basis-aussagen hinzufügen, während sie css3-properties verwenden, da einige der css3-eigenschaften nicht mit dem IE 8 oder darunter funktionieren

#svg-sprite{
position: absolute;
width: 0;
height: 0;
}

.rect{
position: relative;
width: 400px;
height: 400px;
background: #f00;
}

svg{
position: absolute;
top: 25%;
left: 25%;
-webkit-transform: translate(0% , 0% );
-moz-transform: translate(0% , 0% );
-ms-transform: translate(0% , 0% );
-o-transform: translate(0% , 0% );
transform: translate(0% , 0%);
width: 200px;
height: 200px;
fill: #fff;
opacity: 0.5;
}

.circle{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50% , -50%);
-moz-transform: translate(-50% , -50%);
-ms-transform: translate(-50% , -50%);
-o-transform: translate(-50% , -50%);

width: 200px;
height: 200px;
background: #0f0;
border-radius: 50%;
opacity: 0.5;
}

.square{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50% , -50%);
-moz-transform: translate(-50% , -50%);
-ms-transform: translate(-50% , -50%);
-o-transform: translate(-50% , -50%);

width: 200px;
height: 200px;
fill: #0f0;
opacity: 0.5;
}
<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>

<body>

<svg id="svg-sprite">
<symbol viewBox="0 0 42 60" id="map_pointer"><title>map_pointer</title><path d="M21 .254C9.52.254.178 9.594.178 21.076c0 11.153 19.208 37.167 20.026 38.27.187.25.483.4.796.4.313 0 .61-.15.796-.4.818-1.103 20.026-27.117 20.026-38.27C41.822 9.596 32.482.254 21 .254zM21 30c-4.92 0-8.924-4.003-8.924-8.924 0-4.92 4.003-8.923 8.924-8.923 4.92 0 8.924 4.002 8.924 8.923C29.924 25.996 25.92 30 21 30z"/></symbol>
</svg>

<p>SVG icon should be positioned in centre of rectangle. In Firefox this is not the case</p>

<div class="rect">
<svg class="icon"><use xlink:href="#map_pointer" /></svg>

<div class="circle"></div>

<svg class="square" width="200" height="200">
<rect width="200" height="200" />
</svg>
</div>
</body>

</html>

und für den Fall, dass Sie in Zukunft ähnliche findenSchwierigkeiten verwenden Sie inspect-Element und überprüfen Sie, ob die gewünschte css-Klasse für das Element angewendet wird oder nicht, und die meisten Fälle inspect-Element geben Ihnen auch die richtige Fehlermeldung


Speisekarte