Inline SVG as background
Добрый час!
Давно на форуме не был этом:no: <?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? Спасибо!:thanks: |
Часовой пояс GMT +3, время: 04:04. |