Добрый час!
Давно на форуме не был этом
<?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?
Спасибо!
