Я хотел бы установить цвет фона по умолчанию для всего документа SVG, например, красным.По умолчанию цвет фона элемента корня SVG
<svg viewBox="0 0 500 600" style="background: red">/* content */</svg>
Решение выше работ, а фон свойство атрибута стиля, к сожалению, не стандартна: http://www.w3.org/TR/SVG/styling.html#SVGStylingProperties, и поэтому он получает удаляются в процессе очистки с SVG Cleaner.
Есть ли другой способ объявить этот цвет фона?
SVG 1.2 Tiny имеет viewport-fill Я не уверен, насколько широко реализовано это свойство, хотя большинство браузеров сейчас нацелены на SVG 1.1. Opera реализует его FWIW. Раствор более кроссбраузерного
в текущий момент был бы прикрепить <rect> элемент с шириной и высотой 100% и заполнить = «красный» в качестве первого дочернего <svg> элемента
. Прямой взломанный вид работ, но он предполагает, что соотношение сторон svg всегда соответствует видимому окну, поэтому он не будет заполнять весь видовой экран во всех ситуациях. –
код, пожалуйста, код – Martian2049
Ниже приведен пример кода для этого: https://stackoverflow.com/a/47295360/6747994 – JoKalliauer
Другого решения может быть использование <div> такого же размера, чтобы обернуть <svg>. После этого вы сможете применить "background-color" и "background-image", что повлияет на svg.
<div class="background">
<svg></svg>
</div>
<style type="text/css">
.background{
background-color: black;
/*background-image: */
}
</style>
Это решение является взломом HTML. И может работать, только если вы используете SVG на веб-странице. Это не настоящее решение SVG. –
Цвет фона SVG заимствован из компонента, в котором он сидит. (Вроде svg берет цвет страницы, а цвет страницы по умолчанию - белый). Как-то я не думаю, что это взломать. – clinux
@clinux: То, что Чарльз пытался сказать, прекрасно работает для рендеринга веб-страниц, но предположим, что вы хотите использовать тот же svg, что и изображение с расширением .svg, для его рендеринга в другом месте, возможно, это не сработает. –
Найдено, что это работает в Сафари. SVG только цвета в фоновом цвете, где закрывается ограничивающий прямоугольник элемента. Итак, дайте ему границу (ход) с нулевой границей пикселя. Он наполняет все это своим фоном.
<svg style='stroke-width: 0px; background-color: blue;'> </svg>
Это приводит к тому, что все штрихи подэлементов также имеют нулевую ширину, поэтому это не очень хороший «фон». – duanev
Я сейчас работаю над файлом, как это:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="style.css" ?>
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="100%"
height="100%"
viewBox="0 0 600 600">
...
И я пытался поставить это в style.css:
svg {
background: #bf1f1f;
}
Это работает на Chromium и Firefox, но Я не думаю, что это хорошая практика. EyeOfGnome просмотр изображений не делает, и Inkscape использует специальное пространство имен для хранения такого фона:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
version="1.1"
...
<sodipodi:namedview
pagecolor="#480000" ... >
Ну, кажется, что SVG корневого элемент не является частью paintable elements в SVG recommandations.
Так что я предлагаю использовать "rect" solution provided by Robert Longson, потому что я думаю, что это не простой «взлом». Кажется, стандартный способ, чтобы установить фон с SVG.
Это ответ @Robert Лонгсон, теперь с кодом:
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="red"/>
</svg>Этот ответ использует:
Возможно, есть ошибка в SVG Cleaner? Он удаляет также встроенные блоки стиля, хотя они и являются стандартными: http://www.w3.org/TR/SVG/styling.html#StylingWithCSS –