SVGがSafariに表示されないen現在のCSSのChrome（現在解決されていないソリューション）

ほとんどの場合、基本的なことになるだろうと苦労しています。 imgタグを使用して、画像にロゴと基本的なホバー効果のあるページを作成しました。すべてのブラウザで動作するようです。私はその後、効果の定義を保存するためにイメージをsvg形式に変更しました。 Chromeでうまく動作しますが、エクスプローラやSafari（Firefoxはまだテストできませんでした）では動作しません。私は別のタグ（img、オブジェクト、iframe）を試しましたが、SafariとExplorerでは私のsvgは表示を拒否します。あなたはここにページを見ることができます：www.hardnose.be SVGがSafariに表示されないen現在のCSSのChrome（現在解決されていないソリューション）

（他のブラウザのために）意図を見るためにChromeを使用してください。

さらに悪いことに、私はJSFiddleをあなたのために作りました、そして、それは完全に台無しになります。理由を知らないのは、ソースをコピーしてイメージリンクを自分のドメインに変更しただけなので、皆さんはそれを見ることができると確信しています。だから、私のコードはそれほど素晴らしいものではないと思います。私が間違っていることは何ですか？

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

出典

2017-02-15 Inkidu616

は、あなたのサメで何をしようとしていることですか？ http://codepen.io/anon/pen/XpGeVG

IE、Firefox、Chromeで動作します。

私はそれを説明しましょう。まず、HTML：

objectタグは必要ありません。少なくとも、あなたが達成したい配置と効果のためではありません。

ブロック.logoが位置決めを実行します。リンクなしで同じ結果を得ることができますが、HTML構造のほとんどは変更しませんでした。

属性は、hrefまたはonclick属性で指定すると、アクションが実行されます。 FYI targetは、imgの属性ではなく、ハイパーテキストリンクです。

最後に、イメージが内部にあり、SVGファイルを読み込んでいます。

はその後、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; 
}

は、私は強く*セレクタを使用することができませんお勧めします。少なくとも最初は。それぞれの要素にCSSプロパティを定義して、何をしているのかを制御してください。

ご覧のとおり、logoブロックは、画面の中央にリンクを配置するために使用されます。最後に、イメージの不透明度を指定するだけで、ホバーのアスペクト変更が可能です。

出典

2017-02-15 13:09:48 Eria

はい、あなたはcodepenの例です。コードが表示されるのと同じ方法でChrome（hardnose.be）で動作するように見えました。すべてのヒントをありがとう！私は今夜それを通り、それがsvgの問題を解決するかどうかを見ます。 – Inkidu616

うん、それはそれを修正した。どうもありがとう！ – Inkidu616

SVGがSafariに表示されないen現在のCSSのChrome（現在解決されていないソリューション）

答えて

関連する問題