Может ли объект SVG иметь цвет заливки и рисунок заливки? - PullRequest
Новая
       33

Может ли объект SVG иметь цвет заливки и рисунок заливки?

8 голосов
/ 07 июля 2011

Я работаю с SVG, используя библиотеку Raphael .Я могу применить цвет заливки к объекту, например так: 

circle.attr({fill: "#ff0000"});

И это тоже работает (хотя документация Raphael не упоминает об этом): 

circle.attr({fill: "url(pattern.png)"});

Я могуиспользуйте прозрачные PNG в качестве шаблонов заливки, и прозрачность работает, как и ожидалось.Объект svg полностью прозрачен, а изображение шаблона заполнения прозрачно.Но то, что я хотел бы сделать, это указать как изображение шаблона заливки, так и цвет заливки, чтобы цвет отображался там, где изображение шаблона прозрачно - как, например, свойство 'background' с использованием CSS.Возможно ли это с SVG?

1 Ответ

9 голосов
/ 07 июля 2011

Вы можете определить шаблон, который имеет прямоугольник с заливкой, и изображение, которое является вашим png поверх этого прямоугольника. Затем используйте шаблон для заполнения круга (или любого другого элемента).

Это означает выйти за пределы Рафаэля или расширить его, чтобы делать то, что вы хотите. Обратите внимание, что ({fill: "url(pattern.png)"}) создает элемент шаблона и добавляет элемент изображения, указывающий на заданный URL-адрес. Весьма возможно взломать Рафаэля, чтобы он тоже позволил вам передать цвет, а затем вы справляетесь с этим в коде, который создает шаблон, создавая прямоугольник тех же размеров, что и изображение с данным цветом заливки.

Я должен сказать, что если вы хотите, чтобы он работал с IE <9, то вам, вероятно, нужно реализовать его и в VML. </p>

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

...