Почему не отображается svg картинка?
В футер на кнопке "Сохранить на память" меня есть svg картинка https://svgur.com/i/10Br.svg Но она не отображается. Подскажите почему?
:root {
--main-font: 'InterVariable', sans-serif;
--font-for-decoration: 'PressStart2P', monospace;
--header-background-color: #fff;
--header-color: #000;
--background-gradient-color: repeating-linear-gradient(#d3d3d3 0 2px, transparent 2px 4px),
repeating-linear-gradient(90deg, #d3d3d3 0 2px, transparent 2px 4px),
linear-gradient(#e7e7e7, #1a1a1a);
}
.page {
display: flex;
flex-direction: column;
align-items:center;
gap: 100px;
background-image: var(--background-gradient-color);
background-position: center;
background-size: cover;
background-attachment: fixed;
min-inline-size: 320px;
min-block-size: 100dvb;
}
/* Хидер */
.header {
display: flex;
flex-direction: column;
align-items: center;
gap: 22px;
width: 700px;
margin-top: 100px;
border: 2px solid var(--header-color);
padding-bottom: 20px;
color: var(--header-color);
font-family: var(--font-for-decoration);
background-color: var(--header-background-color);
}
.width-content {
width:clamp(376px, 50%, 700px);
}
.header__logo-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 17px;
padding-top: 138px;
font-weight: 400;
text-transform: uppercase;
}
.header__logo-group__title {
font-size: clamp(3.0625rem, 2.7104rem + 1.5023vw, 4.0625rem);
}
.header__logo-group__subtitile {
font-size: clamp(0.875rem, 0.6762rem + 0.8459vw, 1.4375rem);
}
.theme-menu {
}
.header__theme-menu {
}
.theme-menu__list {
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
}
.theme-menu__item {
}
.theme-menu__button {
border: 0;
font-size: 14px;
text-transform: uppercase;
background-color: transparent;
transition: opacity .3s ease;
}
.theme-menu__button:hover {
opacity: 0.6;
}
.theme-menu__button::after {
content: '';
display: block;
width: 0%;
height: 2px;
transition: width 300ms;
}
.theme-menu__button:hover::after {
width: 100%;
background-color: var(--header-color);
}
.theme-menu__button:focus {
opacity: 0.6;
outline: none;
}
.theme-menu__button:disabled {
opacity: 0.6;
pointer-events: none;
}
.theme-menu__button:disabled::before {
content: '▶';
position: absolute;
left: -13px;
animation: left-shift-4px 0.5s infinite ease-in-out alternate-reverse;
}
/* Посты */
.content {
display: flex;
flex-direction: column;
gap: 50px;
}
.post {
font-family: var(--main-font);
font-weight: 400;
font-size: 18px;
background-color: #fff;
color: #000;
border: 2px solid var(--header-color)
}
.post_title {
font-weight: 700;
padding: 5px 10px;
}
.post_image {
position: relative;
}
.post_image__file {
inline-size: 100%;
}
.post_image__watermark {
position: absolute;
right: 25px;
top: 25px;
color: var(--header-color);
font-family: var(--font-for-decoration);
text-transform: uppercase;
font-size: 14px;
opacity: 0.5;
mix-blend-mode: hard-light;
text-shadow:
-1px 0 var(--header-background-color),
0 1px var(--header-background-color),
1px 0 var(--header-background-color),
0 -1px var(--header-background-color);
}
.post_text {
display: flex;
flex-direction: column;
gap: 20px;
padding: 20px;
}
.post_buttom {
display: flex;
justify-content:end;
}
/* Футер */
.footer {
display: flex;
justify-content: center;
}
.footer_button {
display: flex;
align-items:center;
gap: 8px;
padding: 15px 20px;
}
.button__text {
position: relative;
z-index: 5;
font-family: var(--font-for-decoration);
font-size: 14px;
color: var(--header-color)
}
.footer_button__icon {
inline-size: 28px;
mix-blend-mode: difference;
height: 20px;
width: 20px;
}
.footer_button__icon:hover {
fill: var(--header-background-color);
}
/* Диалоговое окно */
.dialog {
align-items: center;
flex-direction: column;
gap: 20px;
width: 357px;
background-color: var(--header-background-color);
color: var(--header-color);
padding: 30px 40px;
font-family: var(--font-for-decoration);
font-size: 14px;
line-height: 21px;
text-transform: uppercase;
}
.dialog[open] {
display: flex;
}
.dialog::backdrop {
opacity: 0.75;
background-color: var(--header-color);
}
.dialog_content {
display: flex;
gap: 20px;
}
.dialog_button {
padding: 9px 17px;
border: 2px solid var(--header-color);
background-color:transparent;
}
/* Общие стили */
.button__common_style {
color: var(--header-color);
position: relative;
border: 2px solid var(--header-color);
background-color: var(--header-background-color);
transition: box-shadow .3s ease;
}
/* Потому что mix-blend-mode: difference не работает */
.button__common_style:hover {
color:var(--header-background-color);
}
.button__common_style::after {
content: '';
position: absolute;
inset: 0;
inline-size: 0%;
background-color: var(--header-color);
transition: inline-size 0.5s ease-in-out;
}
.button__common_style:hover::after {
inline-size: 100%;
}
.button__common_style:focus {
outline: none;
}
.button__common_style:focus-visible {
box-shadow: 4px 4px 0 0 var(--header-color);
}
/* Мобильный вид */
@media(width<=375px) {
.width-content {
width: 100%;
}
.dialog {
width: 341px;
}
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="light dark" />
<title>Закрывающий тег</title>
<link rel="icon" href="./images/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="./fonts/fonts.css" />
<link rel="stylesheet" href="./styles/variables.css" />
<link rel="stylesheet" href="./styles/globals.css" />
<link rel="stylesheet" href="./styles/style.css" />
<link rel="stylesheet" href="./styles/animations.css" />
<link rel="stylesheet" href="./styles/themes.css" />
<script src="./scripts/set-theme.js"></script>
</head>
<body class="page">
<header class="header width-content">
<div class="header__logo-group">
<h1 class="header__logo-group__title"></HTML></h1>
<h2 clsas="header__logo-group__subtitile">закрывающий тег</h2>
</div>
<nav class="theme-menu header__theme-menu">
<!-- Не меняйте разметку этого списка, иначе скрипты перестанут работать -->
<ul class="theme-menu__list">
<li class="theme-menu__item">
<button type="button" data-theme="dark" class="theme-menu__button">
Темно
</button>
</li>
<li class="theme-menu__item">
<button
type="button"
data-theme="auto"
disabled
class="theme-menu__button"
>
Авто
</button>
</li>
<li class="theme-menu__item">
<button type="button" data-theme="light" class="theme-menu__button">
Светло
</button>
</li>
</ul>
</nav>
</header>
<main class="width-content content">
<article class="post">
<h2 class="post_title">Фритрек и нулевой спринт: Подготовка к работе</h2>
<div class="post_image">
<img class="post_image__file" src="images/image.png">
<span class="post_image__watermark"></HTML></span>
</div>
<div class="post_text" >
<p>Это было самое начало пути. На этом этапе важно было проникнуться основами и настроиться на учёбу. И, возможно, подумать, как новые знания могут повлиять на ваше будущее.</p>
<p>Место для ваших воспоминаний о начале обучения.</p>
</div>
<div class="post_buttom">
<button class="post_buttom__heart">heart</button>
<button class="post_buttom__like button__common_style">Like</button>
</div>
</article>
<footer class="footer">
<button
class="footer_button button__common_style"
type="button"
onclick="window['dialog-id'].show()"
aria-controls="dialog-id"
>
<svg viewBox="0 0 40 40" class="footer_button__icon">
<use href="https://svgur.com/i/10Br.svg"/>
</svg>
<span class="footer_button__text button__text">Сохранить на память</span>
</button>
</footer>
<dialog class="dialog" id="dialog-id">
<div class="dialog_content">
<img src="https://svgur.com/i/10Br.svg">
<p>Вставьте дискету, чтобы продолжить</p>
</div>
<form action="#0" method="dialog">
<button
class="dialog_button button__common_style"
type="submit"
onclick="window['dialog'].close()">
OK
</button>
</form>
</dialog>
</main>
<script src="./scripts/like.js"></script>
</body>
</html>