Реализация Svg Path средствами CSS - HTML и CSS

beker · 18.10.2013, 12:16

Возможно ли описать, к примеру, такого вида линию в классе CSS?

Код HTML:

.type
{
   ...
}
 
<svg>
 ...
 <path class="type" ... />
 ...
</svg>

Лубышев · 18.10.2013, 12:54

похоже?

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Кривкая</title>
<style>
.dv1{width: 263px; height: 209px; border-left: 6px dashed #808080; border-top: 6px dashed #808080; border-radius: 221px 0 0 0; padding: 7px;}
.dv2{width: 260px; height: 205px; border-left: 10px solid #000; border-top: 10px solid #000; border-radius: 221px 0 0 0; }
.dv3{width: 238px; height: 183px; border-left: 22px solid #ff0101; border-top: 22px solid #ff0101; border-radius: 220px 0 0 0; box-shadow: inset 16px 14px 21px #ff0101;}
</style>
</head>
<body>
<div class="dv1">
	<div class="dv2">
    	<div class="dv3"></div>
    </div>
</div>

</body>
</html>

beker · 18.10.2013, 13:24

Спасибо за ответ, но я, возможно, не совсем корректно задал вопрос.

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

Код HTML:

<svg>
 ...
 <path class="type" d="m50,200 c200,200 250,-200 450,0" fill="none"/>
 ...
</svg>

Лубышев · 18.10.2013, 14:55

Мое мнение: не возможно

18.10.2013, 14:55	#4
Лубышев Участник клуба Регистрация: 23.07.2007 Сообщений: 1,054	Мое мнение: не возможно Писано по д'Эльфийски

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Обрезка изображения средствами CSS	yearmix	HTML и CSS	13	05.02.2013 17:31
Вставка изображения средствами CSS	DemonIa	HTML и CSS	1	02.06.2012 13:24
Управление псевдоэлементами css средствами javascript	Naive	JavaScript, Ajax	5	01.03.2012 15:27
Оформление e-mail средствами CSS ??	D-Snaker	HTML и CSS	8	05.01.2012 17:57
Эффект ТВ помех средствами CSS	Zmicer	HTML и CSS	1	10.11.2011 22:57