Не показываются иконки svg в HTML

172
22 ноября 2021, 23:50

Подскажите как корректно задавать размеры иконкам svg? В моем коде у меня есть 2 элемента svg: исходный и ссылающийся. Я задал размеры и вьюбокс в исходном, но после того как я задаю размеры, изображение вообще пропадает. Я примерно понял суть проблемы, но как ее решить?

<!DOCTYPE html>
<html>
    <head>
        <link href="style.css" type="text/css">
    </head>
    <body>
        <header>
            <div class='logo'>
                <svg xmlns="http://www.w3.org/2000/svg" 
                xmlns:xlink="http://www.w3.org/1999/xlink">
                    <use width='40px' height='60px' xlink:href='#logo'></use>
                </svg>
            </div>
            <nav>
            </nav>
        </header>
    <svg width='40px' height='60px' viewBox='200 50 600 550'>
        <path id='logo' d='M 200 400 L 400 50 L 600 400 L 500 400 L 400 50 L 500 400 L 400 550 L 300 400 L 400 50 L 400 550 L 300 400 L 200 400 ' stroke='blue' fill='transparent'></path>
    </svg>
    </body>
</html>
Answer 1

Задайте viewBox тому элементу, в котором Вы используете тег use, таким образом Вы задаете ему область, по которой обрезается то, что видно на этой картинке, а второе изображение можно вообще скрыть...

<svg viewBox='200 50 600 550'> 
    <use xlink:href='#logo'></use> 
</svg> 
<svg style="display:none"> 
    <path id='logo' d='M 200 400 L 400 50 L 600 400 L 500 400 L 400 50 L 500 400 L 400 550 L 300 400 L 400 50 L 400 550 L 300 400 L 200 400 ' stroke='blue' fill='transparent'></path> 
</svg>

READ ALSO
Не работает якорь указывающий на другую страницу
HTML

Не работает якорь указывающий на другую страницу

Мне необходимо, что бы при нажатии на ссылку переходило на другую страницу в определенную её часть с формой

 189
как вставить svg через тег &lt;img&gt;?
HTML

как вставить svg через тег <img>?

пробую вставить svg таким образом: <img src="/assets/menu/menubuttonsvg"> но при этом ничего не работает (файл assets находится в корне, всё остальное тоже верно)

 197
Нужно ли закрывать локальныеIO-потоки в Java
Java

Нужно ли закрывать локальныеIO-потоки в Java

Если поток был создан локально, обязательно ли его закрывать в конце метода?

 152
Как передать в метод дополнительный параметр?
Java

Как передать в метод дополнительный параметр?

Имеется массив строк:

 203