SVG wird nicht in Safari angezeigt. Chrome im aktuellen CSS (die hier gefundenen Lösungen funktionieren nicht)

Ich habe mit den Dingen gekämpft, die für die meisten von euch wahrscheinlich grundlegend sind (ich bin ziemlich neu in all dem). Ich hatte eine Seite mit einem Logo und einem grundlegenden Hover-Effekt für ein Bild mit einem Img-Tag erstellt. Scheint in allen Browsern zu funktionieren. Ich habe dann das Bild in ein SVG-Format geändert, um die Definition für den Effekt beizubehalten. Funktioniert gut in Chrome, soweit ich sehen kann, aber nicht auf Explorer oder Safari (konnte Firefox noch nicht testen). Ich habe verschiedene Tags ausprobiert (img, object, iframe), aber auf Safari und Explorer weigert sich mein svg einfach zu erscheinen. Sie können die Seite hier sehen: www.hardnose.be SVG wird nicht in Safari angezeigt. Chrome im aktuellen CSS (die hier gefundenen Lösungen funktionieren nicht)

Verwenden Sie Chrome, um zu sehen, was die Absicht (für andere Browser) ist.

Um alles noch schlimmer zu machen, habe ich eine JSFiddle für euch gemacht, und es wird komplett vermasselt. Ich weiß nicht warum, weil ich mir ziemlich sicher bin, dass ich einfach die Quelle kopiert und den Bildlink zu meiner Domain geändert habe, damit ihr es sehen könnt. Also ich denke, mein Code ist nicht so großartig, um damit zu beginnen. Irgendwelche Ideen, was ich falsch mache?

HTML

<html> 
<body>  
    <div class="logo"> 
     <a> 
      <object type="image/svg+xml" data="/images/LogoWhiteSmallText.svg"> 
      <img src="http://hardnose.be/images/LogoWhiteSmallText.svg" alt="Hardnose Logo" target="_blank"> 
      </object> 
     </a> 
    </div>    
</body> 
</html>

CSS

* { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    font-family: "Source Sans Pro", sans-serif; } 

/* line 28, /Users/Inkidu/Documents/Hardnose/Website/v2.1/css/index.scss */ 
body { 
    background: #6ca66b; 
    /* For browsers that do not support gradients */ 
    background: -webkit-linear-gradient(left top, #6ca66b, #3398cc); 
    /* For Safari 5.1 to 6.0 */ 
    background: -o-linear-gradient(bottom right, #6ca66b, #3398cc); 
    /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient(bottom right, #6ca66b, #3398cc); 
    /* For Firefox 3.6 to 15 */ 
    background: linear-gradient(to bottom right, #6ca66b, #3398cc); 
    /* Standard syntax (must be last) */ } 

/* line 41, /Users/Inkidu/Documents/Hardnose/Website/v2.1/css/index.scss */ 
object { 
    height: auto; 
    width: auto; 
    margin: auto; 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    position: fixed; 
    opacity: 0.2; 
    z-index: 1; } 

/* line 54, /Users/Inkidu/Documents/Hardnose/Website/v2.1/css/index.scss */ 
.logo { 
    position: fixed; 
    overflow: hidden; 
    display: inline-block; 
    height: auto; 
    width: auto; 
    margin: auto; 
    vertical-align: top; } 
    /* line 62, /Users/Inkidu/Documents/Hardnose/Website/v2.1/css/index.scss */ 
    .logo :hover { 
    height: auto; 
    width: auto; 
    opacity: 1.0; 
    -webkit-transform: scale(1.1); 
    -ms-transform: scale(1.1); 
    transform: scale(1.1); 
    transition: all 0.5s ease; } 

/* line 73, /Users/Inkidu/Documents/Hardnose/Website/v2.1/css/index.scss */ 


/*# sourceMappingURL=index.css.map */

Quelle

2017-02-15 Inkidu616

Ist das, was Sie versuchen, mit Ihrem Hai zu tun? http://codepen.io/anon/pen/XpGeVG

Es funktioniert auf IE, Firefox und Chrome.

Lassen Sie mich es erklären. Zuerst HTML:

<div class="logo"> 
    <a href="#" target="_blank"> 
    <img src="http://www.hardnose.be/images/LogoWhiteSmallText.svg" alt="Hardnose Logo" /> 
    </a> 
</div>

Ich glaube nicht, dass Sie die object Tag benötigen. Zumindest nicht für die Platzierung und Wirkung, die Sie erreichen möchten.

Der .logo Block führt die Positionierung durch. Sie können das gleiche Ergebnis ohne es haben, indem Sie den Link direkt positionieren, aber ich behalte den größten Teil Ihrer HTML-Struktur unverändert.

Der Link führt die Aktion aus, sobald Sie ihn mit dem Attribut href oder onclick angeben. FYI, target ist kein Attribut von img, sondern von einem Hypertext-Link.

Schließlich das Bild im Inneren, Laden Sie Ihre SVG-Datei.

Dann wird die CSS:

html { height: 100% } 
body { 
    background-color: #3398cc; /* Use gradient here instead */ 
    position: relative; 
    height: 100%; 
} 
.logo { 
    display: block; 
    margin: auto; 
    position: absolute; 
    width: 129px; height: 60px; 
    top: 0; bottom: 0; left: 0; right: 0; 
} 
.logo img { 
    display: block; 
    opacity: 0.2; 
    width: 100%; 
} 
.logo img:hover { 
    opacity: 1.0; 
    -webkit-transform: scale(1.1); 
    -ms-transform: scale(1.1); 
    transform: scale(1.1); 
    transition: all 0.5s ease; 
}

Ich rate Ihnen dringend, nicht * Wähler zu verwenden. Zumindest am Anfang. Definieren Sie Ihre CSS-Eigenschaften für jedes Element, um die Kontrolle darüber zu behalten, was Sie tun.

Wie Sie sehen, wird der logo Block verwendet, um die Verbindung in der Mitte des Bildschirms zu positionieren. Und schließlich müssen Sie nur die Deckkraft Ihres Bildes und dessen Änderung beim Schweben angeben.

Quelle

2017-02-15 13:09:48 Eria

Ja, du bist ein Codepen Beispiel ist genau das, was ich will! Es scheint auf Chrome (hardnose.be) genauso zu funktionieren, wie Ihr Code auftaucht. Danke für alle Tipps! Ich werde es heute Abend durchgehen und sehen, ob es das Svg-Problem löst. – Inkidu616

Yup, das hat es behoben. Danke vielmals! – Inkidu616

SVG wird nicht in Safari angezeigt. Chrome im aktuellen CSS (die hier gefundenen Lösungen funktionieren nicht)

Antwort

Verwandte Themen