SVG прямоугольник
SVG Формы
SVG имеет некоторые заранее определенные формы элементов, могут быть использованы разработчиками в использовании и эксплуатации:
- Прямоугольник <прямоугольник>
- Круглый <круг>
- Овальные <Эллипс>
- Линия <строка>
- Ломаная <ломаная>
- Полигон <многоугольник>
- Путь <путь>
В следующих разделах объяснит вам все эти элементы, начиная от прямоугольного элемента.
SVG прямоугольник - <прямоугольник>
Пример 1
Тег <Прямоугольный> используется для создания прямоугольника и прямоугольный вариант:
Вот SVG код:
примеров
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>
Попробуйте »
Для пользователей Opera: вид SVG - файла (щелкните правой кнопкой мыши на источнике предварительного просмотра SVG графики).
Анализ кода:
- ширина и высота атрибуты Rect элементы определяют высоту и ширину прямоугольника
- стиль свойство используется для определения свойств CSS
- заливка CSS свойство определяет прямоугольник цвет заливки (значения RGB, название цвета или шестнадцатеричное значение)
- Ширина хода ширины CSS свойство определяет прямоугольную границу
- Свойство цвет обводки CSS определяет прямоугольную границу
Пример 2
Давайте посмотрим на другой пример, он содержит ряд новых свойств:
Вот код SVG:
примеров
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;
stroke-opacity:0.9"/>
</svg>
Попробуйте »
Для пользователей Opera: вид SVG - файла (щелкните правой кнопкой мыши на источнике предварительного просмотра SVG графики).
Анализ кода:
- Атрибут X определяет левое положение прямоугольника (например, х = "0", чтобы определить прямоугольник с левой стороны окна браузера, расстояние 0px)
- Топ атрибут позиции у определяет прямоугольник (например, у = "0" из определения прямоугольника в верхней части окна браузера 0px)
- свойство заполнения непрозрачности CSS определяет прозрачность цвета заливки (допустимый диапазон: 0--1)
- Свойство CSS-тактный непрозрачности определяет прозрачность цвета обводки (допустимый диапазон: 0--1)
Пример 3
Определить непрозрачность всего элемента:
Вот SVG код:
примеров
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5"/>
</svg>
Попробуйте »
Для пользователей Opera: вид SVG - файла (щелкните правой кнопкой мыши на источнике предварительного просмотра SVG графики).
- CSS свойство непрозрачности определяет значение прозрачного элемента (диапазон: 0-1).
Пример 4
Последний пример, создайте прямоугольник с закругленными углами:
Вот SVG код:
примеров
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
</svg>
Попробуйте »
Для пользователей Opera: вид SVG - файла (щелкните правой кнопкой мыши на источнике предварительного просмотра SVG графики).
- Приемные и Ry атрибуты могут генерировать прямоугольник с закругленными углами.