Учебник HTML5+CSS3: используйте колледжи SVG для обработки веб -фотографий

Введение статьи Wulin.com (www.vevb.com): полное имя SVG - масштабируемая векторная графика. Если вы использовали Adobe Illustrator, я считаю, что вы не незнакомы с этим подходящим форматом картинок!

Прежде чем мы начнем использовать SVG, давайте сначала посмотрим на SVG и объясним, почему мы используем SVG.

Полное название SVG - масштабируемая векторная графика. Если вы использовали Adobe Illustrator, я считаю, что вы не незнакомы с этим подходящим форматом картинок!

Если вам нужно поддержать эти версии браузера, вы можете использовать Modernizr следующим образом:

if (! modernizr.svg) {

$ (. Gblogo img) .attr (src, images/logo.png);

}

Или используйте следующий более простой код:

<img src = gblogo.svg onerror = this.onerror = null; this.src = gblogo.png>

Вы можете использовать его непосредственно в качестве изображения, следующим образом:

<img src = logo.svg href = class = logo>

csswang.com

</a>

CSS -код:

.logo {

отображать:

текстовый:

ширина:

высота:

фон:

размер фонового размера:

}

Вы можете скопировать код SVG непосредственно в тело, и вы увидите изображение следующим образом:

<тело>

<!-Скопируйте код SVG здесь, и изображение будет отображаться->

</body>

Вы можете использовать CSS для управления файлом SVG. Следующий код будет управлять цветом фона изображения при приостановке мыши:

<G Class = логотип Transform = Translate (0,000000 500,000000) Шкала (0,100000, -0,100000)

Fill =#00000 Stroke = none>

Приведенный выше код определяет класс логотипа, и мы можем определить его в CSS следующим образом:

.logo: Hover {

наполнять:

...

}

Обратите внимание, что в SVG мы используем заполнение вместо фона, чтобы определить цвет фона.

Вы даже можете использовать фильтры для контроля неоднозначности следующим образом:

.logo: Hover {

наполнять:

фильтр:

}

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

Онлайн отладка:

SVG - это очень мощный формат изображения, который может помочь вам эффективно обрабатывать изображения и имеет более гибкий и мощный метод графического отображения, чем JPG или PNG. Я считаю, что если это будет применено во времени, это определенно станет самым популярным методом обработки изображений!