SVG не отображается в Safari en Chrome в текущем CSS (решения здесь не работают)

Борясь с тем, что может быть основным для большинства из вас (я довольно новичок в этом). Я сделал страницу с логотипом и основным эффектом зависания изображения, используя тег img. Казалось, что он работает на всех браузерах. Затем я изменил изображение на формат svg, чтобы сохранить определение эффекта. Насколько мне известно, отлично работает на Chrome, но не на проводнике, ни на Safari (пока не смог проверить Firefox). Я пробовал разные теги (img, object, iframe), но в Safari и Explorer мой svg просто отказывается появляться. Вы можете увидеть страницу здесь: www.hardnose.be SVG не отображается в Safari en Chrome в текущем CSS (решения здесь не работают)

Используйте 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:

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

Я не думаю, что вам нужно 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

Yup, это исправлено. Большое спасибо! – Inkidu616

SVG не отображается в Safari en Chrome в текущем CSS (решения здесь не работают)

ответ

Смежные вопросы