Можно ли стилизовать внешний SVG-файл с помощью CSS? - PullRequest
Новая
       0

Можно ли стилизовать внешний SVG-файл с помощью CSS?

11 голосов
/ 31 января 2012

Можно ли стилизовать внешний svg-файл с помощью css без изменения содержимого svg-файла?

<img src="image/svg/3ds-max.svg">

И есть ли лучший способ отобразить внешний файл SVG в HTML5?

Ответы [ 3 ]

9 голосов
/ 31 января 2012

Невозможно использовать тег img, они в основном похожи на растровые изображения в том, что касается доступа к ним или их изменения.Вместо этого вы можете использовать тег <iframe> с его атрибутом style или просто включить встроенный svg в файл, что вы можете сделать с html5.

3 голосов
/ 31 января 2012

Почти.Если вы можете встроить SVG-файл непосредственно в документ HTML5 с помощью тега svg, то вы можете оформить его с помощью CSS, например: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            #redcircle { stroke:black; stroke-width:5; }
        </style>
    </head>
    <body>
        <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
            <circle id="redcircle" cx="50" cy="50" r="30" fill="red" /> 
        </svg>
    </body>
</html>
1 голос
/ 31 августа 2018

С тех пор, как был задан этот вопрос, все немного изменилось. Вы можете использовать инжектор SVG, чтобы сделать SVG встроенным.

С SVGInject вы можете добавить свой SVG следующим образом: 

 <img src="image/svg/3ds-max.svg" onload="SVGInject(this)" >

Инжектор заменит элемент <img> на элемент <svg> из файла SVG после его загрузки. Затем вы можете стилизовать все элементы SVG так же, как и любой другой элемент в HTML DOM.

Отказ от ответственности: я являюсь одним из авторов SVGInject.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...