Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.12.2011, 20:12
Аватар для Paguo-86PK
Профессор
Отправить личное сообщение для Paguo-86PK Посмотреть профиль Найти все сообщения от Paguo-86PK
 
Регистрация: 16.09.2009
Сообщений: 253

Inline SVG as background
Добрый час!
Давно на форуме не был этом
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>SVG Test</title>
<style>
body {
 background-image: url('#grad');                                 // HERE NOT WORKING
}
</style>
<script>
function main(wnd) {
 document.body.style.backgroundImage = '"#url(diamondPattern)"'; // HERE NOT WORKING
}
</script>
</head>
<body onload='main(this)'>
<svg id='inlineSvg' xmlns='http://www.w3.org/2000/svg' width='320px' height='240px'>
<defs>
<path id='linearPath' d='M0,0 100,0 100,100 0,100 z'/>
<linearGradient id='linearGrad' x1='0%' y1='0%' x2='100%' y2='100%'>
 <animate fill='freeze' begin='0s' dur='5s' attributeName='x1' attributeType='XML' repeatCount='10'>
  <mpath xlink:href='#linearPath'/>                              <!-- HERE NOT WORKED -->
</animate>
 <stop offset="0%" stop-color="blue"/>
 <stop offset="10%" stop-color="red"/>
 <stop offset="20%" stop-color="orange"/>
 <stop offset="30%" stop-color="yellow"/>
 <stop offset="40%" stop-color="green">
  <animate from='35%' to='55%' fill='freeze' dur='0.5s' attributeName='offset' attributeType='XML' repeatCount='indefinite'/>
 </stop>
 <stop offset="60%" stop-color="deepskyblue"/>
 <stop offset="70%" stop-color="blue"/>
 <stop offset="80%" stop-color="purple"/>
 <stop offset="100%" stop-color="white"/>
</linearGradient>
</defs>
<pattern id='diamondPattern' x='0' y='0' width='16px' height='16px' patternUnits='userSpaceOnUse'>
<rect x='5px' y='5px' width='10px' height='10px' transform='rotate(45, 8, 8)' fill='url(#linearGrad)'/>
</pattern>
<rect x='0' y='0' width='50%' height='50%' fill='url(#diamondPattern)'/>
</svg>
</body></html>
Короче, встроил svg на html напрямую. Однако никак не могу установить его как background! Если указываю внешний svg - проблем нет. А вот так - нет.
Для чего? Просто хочу все элементы оформить svg-графикой. Почему inline? Просто потом буду в теле документа генерировать svg средствами js.
Вообще гуглил битый час. Что-то не подобного приёма. Есть .toDataURL(...), но он работает лишь с canvas. Нету у svg этой функции ни в Opera, ни в Chrome, ни в Safari, ни в FF!
И вообще можно паттерны использовать из svg к элементам html?

Спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Создание SVG элемента и вставка на страницу FINoM Events/DOM/Window 3 13.09.2015 16:47
SVG: background для Path debugx Общие вопросы Javascript 1 05.11.2011 07:28
Оцените, пожалуйста код вёрстки OlegALL Ваши сайты и скрипты 18 26.07.2011 09:35
Простой графический движок: SVG vs Canvas stryaponoff Общие вопросы Javascript 5 29.06.2010 16:59
svg. обработка событий amigo* Элементы интерфейса 0 23.06.2010 22:31