HTML5 SVG 2D Введение 5 - Метод представления цвета и определения цвета

Автор：Eve Cole Время обновления：2025-04-11 04:00:03

SVG и Canvas одинаковы, оба используют стандартные методы представления цвета HTML/CSS, и эти цвета могут использоваться для атрибутов заполнения и хода.

Есть в основном следующие способы определения цвета :

1. Цвет название: используйте название цвета красное, синий, черный ...

2. Значение RGBA/RGB: это также легко понять, например, #FF0000, RGBA (255 100,100,0,5).

3. шестнадцатеричное значение: цвет, определенный в шестнадцатеричной, такой как #ffffff.

4. Как показано на рисунке ниже:

5. Заполнение рисунка: используйте пользовательский рисунок в качестве цвета заполнения.

Первые немногие очень просты, давайте сосредоточимся на двух заполненных цветах в следующих двух.

Линейный градиент

Линейный градиент может использоваться для определения линейных градиентов, и каждый цветовой компонент градиента определяется с использованием элемента остановки. См. Следующий пример:

<svg>

<FEFS>

</lineargradient>

</lineargradient>

#rect1 {fill: url (#gradient1); }

.stop1 {stop-color: red; }

.stop2 {stop-color: черный; Остановка: 0; }

.stop3 {stop-color: blue; }

]]>

</style>

</defs>

</svg>

В этом примере нам нужно отметить :

1. Цветовые элементы градиента должны быть размещены в элементе DEFS;

2. Вам нужно установить значение идентификатора для элемента градиента, в противном случае другие элементы не смогут использовать этот градиент.

3. Черты градиента определяются с использованием Stop, и их свойства также могут быть определены с использованием CSS; Он поддерживает атрибуты, такие как класс и ID, которые поддерживаются стандартным HTML. Другие общие атрибуты следующие :

Атрибут смещения : это определяет диапазон действия цвета члена, а значение этого атрибута составляет от 0% до 100% (или от 0 до 1); Обычно первый цвет установлен на 0%, а последний - 100%.

Атрибут стоп-цвета : это очень просто, определяя цвет цвета члена.

Свойство остановки : определяет прозрачность цветов членов.

x1, y1, x2, y2 Атрибуты: эти две точки определяют направление градиента. Если вы не пишете его по умолчанию, это горизонтальный градиент. В приведенном выше примере также создается вертикальный градиент.

4. Используйте градиентные цвета, как показано в примере, просто назначьте значение для заполнения или удара в форме URL (#ID).

5. Повторное использование членов градиента: вы также можете использовать Xlink: href для обозначения определенных членов градиента, поэтому приведенный выше пример также можно переписать следующим образом:

</lineargradient>

Градиент кольца

Используйте элемент радиалграграгральта для определения градиента кольца, или используйте остановку, чтобы определить цвет элемента. Смотрите пример:

<svg>

<FEFS>

</radialgradient>

</radialgradient>

</defs>

</svg>

Из приведенного выше примера, за исключением имени элемента и некоторых специальных членов, все остальное такое же, как линейный градиент, включая определение остановки, должно быть размещено в DEFS, он должен быть установлен на ID, использовать URL (#ID) для назначения значений и т. Д. Эти специальные члены следующие:

Атрибут смещения : это то же самое, что и значение линейного градиента, но значение отличается. В градиенте кольца 0% представляет центр круга, который легко понять.

CX, CY, R Атрибуты: на самом деле, это легко понять. Кольцо постепенное. Конечно, вам нужно определить центр и радиус кольца. Вы можете понять размер и положение круга в приведенном выше примере.

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

Тем не менее, вам нужно обратить внимание на значения CX, Cy, R, Fx, FY выше. Вы обнаружите, что все они десятичные десятики, так что же такое подразделения?

Это требует от вас сначала понять еще один связанный атрибут: GradientUnits , который определяет координатные единицы, используемые для определения цветов градиента. Это свойство имеет 2 доступных значения: userspaceonuse и объект Boundingbox.

ObjectBoundingbox - это значение по умолчанию. Координаты, которые он использует, относятся относительно ящика для оболочки объекта (случай, когда он не является квадратной коробкой, более сложным, пропустите его), а диапазон значений составляет от 0 до 1. Это означает, что центр круга составляет 1/4 от верхнего левого угла коробки корпуса, а радиус 0,25 означает, что радиус составляет 1/4 от длины квадратной коробки объекта, как вы можете видеть на рисунке.

userspaceonuse означает, что используются абсолютные координаты. При использовании этого настройки вы должны убедиться, что цвет градиента и заполнения объектов должны храниться в том же положении.

Посмотрите на следующий пример, обратите внимание, что значение по умолчанию свойства GradientUnits - это объект Boundingbox:

<svg>

<FEFS>

<radialGradient id = "gradient5"

cx = "0,5" Cy = "0,5" r = "0,5" fx = "0,25" fy = "0,25">

</radialgradient>

</defs>

<rect x = "10" y = "10" rx = "15" ry = "15"

fill = "url (#gradient5)" rosck = "черный" wydth = "2"/>

<текст x = "38" y = "40" fill = "white" font-family = "sans-serif" font-size = "10pt"> (fx, fy) </text>

<текст x = "63" y = "63" fill = "white" font-family = "sans-serif" font-size = "10pt"> (cx, cy) </text>

</svg>

Вы будете знать значение фокуса, глядя на визуализации.

Кроме того, существуют градиентные цветовые элементы и некоторые свойства преобразования, такие как градиенттрансформформа , что здесь не является фокусом, и преобразование будет обобщено позже.

Другим возможным атрибутом, который используется, является свойство FressMethod , которое определяет поведение, которое должен принять цвет градиента, когда оно достигает своей конечной точки. Это свойство имеет 3 дополнительных значения: PAD (по умолчанию), отражайте, повторите. Само собой разумеется, Pad - это естественный переход. После того, как цвет градиента закончился, используйте последний цвет члена, чтобы непосредственно отобразить оставшуюся часть объекта. Refect заставит градиентный цвет продолжаться, но цвет градиента будет продолжать отображаться в обратном направлении, начиная с последнего цвета до первого цвета; Когда конечная точка градиента снова достигнута, обратите за собой порядок, так что объект заполнен таким образом. Повторение также позволит градиентному цвету продолжать рендеринг, но не будет изменен, и все равно будет отображаться от первого цвета к последнему цвету снова и снова. Рендеринги следующие:

Посмотрите на кусок кода, который повторяется неоднократно:

<svg>

<FEFS>

<radialGradient id = "градиент"

cx = "0,5" Cy = "0,5" r = "0,25" fx = ". 25" fy = ". 25"

spredMethod = "Repeat">

</radialgradient>

</defs>

<rect x = "50" y = "50" rx = "15" ry = "15"

Fill = "url (#Gradient)"/>

</svg>

Текстура заполнение

Наполнение текстуры также является популярным способом заполнения. В SVG вы можете использовать шаблон для создания текстуры, а затем использовать этот шаблон для заполнения других объектов. Давайте посмотрим на пример напрямую:

<svg>

<FEFS>

</lineargradient>

</lineargradient>

</defs>

<FEFS>

<шаблон id = "pattern" x = ". 05" y = ". 05">

</pattern>

</defs>

</svg>

Пример выглядит простым, создайте рисунок из градиента, а затем используйте рисунок

Заполните прямоугольник. Примечание здесь:

1. Эффект отличается при заполнении этого шаблона в разных браузерах.

Например, примеры работают одинаково в Firefix и Chrome. Но если вы сделаете градиент

Если шаблон определяется в той же комбинации DEFS, Firefox все еще может нормально отображаться.

Тем не менее, Chrome не может распознать цвет градиента, он заполнит его только черным по умолчанию.

2. Паттерн также должен определить ID.

3. шаблон также должен быть определен в DEFS.

4. Использование шаблона также должно напрямую назначать URL (#ID) для заполнения или инсульта.

Выше всего очень просты. Давайте сосредоточимся на представлении координат в примере. Координаты более сложны по схеме.

Паттерн содержит два родственных свойства: PatternUnits и PatternContentUnits Атрибуты; Оба свойства по -прежнему имеют только два значения: ObjectBoundingbox и userpaceonuse. Значение этих двух значений обсуждалось выше. Здесь легко запутаться, так это то, что значения по умолчанию этих двух свойств различны, но когда вы понимаете причины для этого, вы обнаружите, что это имеет смысл.

1. Атрибут PatternUnits

Это свойство такое же, как и свойство градиента GradientUnits, а объект Boundingbox используется по умолчанию. Атрибуты, затронутые этим атрибутом, - это x, y, ширина и высота. Эти четыре атрибута определяют начальную точку и ширину шаблона соответственно. Они оба используют относительные значения, и в примере они хотят заполнить горизонтальные и вертикальные направления 4 раза, поэтому как ширина, так и высота устанавливаются на 0,25.

2. PatternContentUnits собственность

Значение этого свойства по умолчанию является точно противоположным, используя userspaceonuse. Это свойство описывает систему координат форм, нарисованных в шаблоне (например, прямо, круг выше). То есть по умолчанию форма, которую вы рисуете в шаблоне, использует другую систему координат и размер/положение самого шаблона. Учитывая случай в примере выше, мы хотим заполнить прямоугольник 200*200 и повторить каждое направление 4 раза. Это означает, что каждый шаблон составляет 50*50, поэтому два прямоугольника и круг внутри рисунка нарисованы в этом прямоугольнике 50*50. Таким образом, мы можем понять координаты прямоугольника и кружить в приведенном выше шаблоне. Кроме того, для того, чтобы сосредоточить шаблон в этом примере, его необходимо сметить на 10px перед рендерингом. Это значение ограничено свойством PatternUnits, поэтому по умолчанию значения x и y: 10/200 = 0,05.

Так почему же шаблон устанавливает значения по умолчанию двух атрибутов, подобных этому?

Это определяется использованием пользователя (обсуждается в приведенном выше примере):

Первый стиль шаблона : я думаю, что это большая часть ситуации, поэтому он обрабатывается как значение по умолчанию: шаблон растягивается по мере масштабируемого внешнего графика, и независимо от того, насколько велик внешний квадрат, шаблон всегда будет заполнен 4 раза в обоих направлениях. Тем не менее, графика, содержащаяся в шаблоне, не будет растянута, поскольку квадраты, заполненные наружными, масштабируются. Хотя это надуманно, просто поймите это.

Второй стиль рисунка : форма в рисунке также растягивается, поскольку форма внешнего края масштабируется. Мы также можем установить значение свойства PatternContentUnits в объект BoundingBox для достижения этого эффекта. Например, измените часть шаблона следующим образом:

<шаблон id = "pattern" patternContentUnits = "ObjectBoundingBox">

</pattern>

После модификации при изменении размера заполненного прямоугольника форма также будет растянута. И после модификации он изменяется на координаты периферического объекта, поэтому координаты x и y шаблона больше не нужны. Узор всегда будет отрегулировать в соответствии с заполненной формой.

Третий стиль рисунка : форма и размер рисунка фиксируются. Независимо от того, как масштабируются периферийные объекты, вы можете изменить систему координат на пользовательский размаг, чтобы достичь этого эффекта. Код заключается в следующем:

<шаблон id = "pattern" x = "10" y = "10" patternUnits = "userpaceonuse">

</pattern>

Типичные закономерности в этих 3 показаны на рисунке ниже:

Практическая ссылка:

Официальный документ: http://www.w3.org/tr/svg11/

Индекс скрипта: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Центр разработки: https://developer.mozilla.org/en/svg

Популярная ссылка: http://www.chinasvg.com/