Как установить цвет фона SVG?

Опубликовано: 18 Декабря, 2021

Есть два типа изображений, которые можно использовать в качестве фона, и в обоих случаях вы можете изменить цвет фона изображения.

Растр: изображения, в которых каждый пиксель представляет отдельный цвет в изображении. Поэтому, когда мы увеличиваем масштаб, пиксели начинают увеличиваться, и, следовательно, после определенного момента изображение начинает размываться.
Вектор: это изображения, в которых была сохранена информация о рисунке. Поэтому, когда они увеличиваются, изображение перерисовывается в соответствии с размером этой страницы. Следовательно, они не пикселизируются, и мы получаем четкие и резкие изображения. Поскольку эти изображения масштабируемы, они известны как SVG (масштабируемая векторная графика).

SVG - это масштабируемая векторная графика . Фон SVG используется для рисования любой формы, задав любой цвет, который вы хотите, с помощью свойства set. Приведенные ниже примеры более конкретно иллюстрируют концепцию SVG set background-color. SVG позволяет изменять размер фона CSS, положение и гораздо более сложные свойства.

Пример: атрибуты cx и cy определяют координаты x и y центра круга. Если cx и cy опущены, тогда центр круга устанавливается равным (0, 0). Атрибут r определяет радиус круга. Установить цвет фона для этого SVG можно двумя способами.

 <!DOCTYPE html>
 < html >
 
< head >
    < title >
        SVG set Background Color
    </ title >
 </ head >
 
< body >
    < center >
        < h1 style = "color:green;" >GeeksforGeeks</ h1 >
        < h4 >SVG set Background Color</ h4 >
 
        < svg height = "100" width = "100" >
            < circle cx = "50" cy = "50" r = "40" stroke = "black"
                    stroke-width = "3" fill = "red" />
        </ svg >
    </ center >
 </ body >
 
</ html > 

Выход:

Задать цвет фона тела SVG можно двумя способами:

Метод 1. Вы можете добавить цвет фона к самому телу SVG.

 <!DOCTYPE html>
 < html >
 
< head >
    < title >
        SVG set Background Color
    </ title >
 </ head >
 
< body >
    < center >
        < h1 style = "color:green;" >GeeksforGeeks</ h1 >
        < h4 >SVG set Background Color</ h4 >
 
        < svg height = "100" width = "100" style = "background-color:green" >
            < circle cx = "50" cy = "50" r = "40" stroke = "black"
                    stroke-width = "3" fill = "red" />
        </ svg >
    </ center >
 </ body >
 
</ html > 

Выход:

Метод 2: вы можете добавить прямоугольник в качестве первого или самого нижнего слоя со 100% шириной и 100% высотой и установить желаемый цвет фона, а затем мы можем начать рисовать форму.

 <!DOCTYPE html>
 < html >
 
< head >
    < title >
        SVG set Background Color
    </ title >
 </ head >
 
< body >
    < center >
        < h1 style = "color:green;" >GeeksforGeeks</ h1 >
        < h4 >SVG set Background Color</ h4 >
 
        < svg height = "100" width = "100" >
            < rect width = "100%" height = "100%" fill = "green" />
            < circle cx = "50" cy = "50" r = "40" stroke = "black"
                    stroke-width = "3" fill = "red" />
        </ svg >
    </ center >
 </ body >
 
</ html > 

Выход:

Вопросы о Web технологиях HTML

Как установить цвет фона SVG?

РЕКОМЕНДУЕМЫЕ СТАТЬИ