06.01.2017, 17:03
|
|
Интересующийся
|
|
Регистрация: 24.11.2016
Сообщений: 11
|
|
|
Создание SVG
Суть проста. Есть SVG
<svg
onload="createSVG();">
<defs>
<script><![CDATA[
var fig = {
'1' : {'x' : 10, 'y' : 20, 'fill' : 'red'},
'2' : {'x' : 60, 'y' : 70, 'fill' : 'green'}
};
function createSVG(){
/* вот тут как-то правильно с DOM SVG документа надо работать */
svgDoc = svg.contentDocument;
fig1 = svgDoc.createElement('use'); // ????
}
]]></script>
<g id="figure">
<polygon points="0,0 0,5 5,5 5,0" />
<circle cx="3" cy="3" r="2" />
</g>
</defs>
<rect x="0" y="0" width="100" height="100" />
<!-- вот тут должен быть результат -->
<use xlink:href="#figure" x="10" y="20" fill="red"/>
<use xlink:href="#figure" x="60" y="70" fill="green"/>
</svg>
нужно программно добавить фигурки. в примере выше они добавлены через use.
Последний раз редактировалось be@ver, 06.01.2017 в 17:05.
|
|
06.01.2017, 19:45
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
|
svg createElementNS use
be@ver,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script>
var fig = {
'1': {
'x': 10,
'y': 20,
'fill': 'red'
},
'2': {
'x': 60,
'y': 70,
'fill': 'green'
}
};
function createSVG() {
var container = document.querySelector('svg');
Object.keys(fig).forEach(function(key) {
var attr = fig[key];
var newuse = document.createElementNS("http://www.w3.org/2000/svg", "use");
Object.keys(attr).forEach(function(k) {
newuse.setAttributeNS(null, k, attr[k]);
});
newuse.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#figure');
container.appendChild(newuse)
});
}
</script>
</head>
<body>
<svg onload="createSVG();">
<defs>
<g id="figure">
<polygon points="0,0 0,5 5,5 5,0" />
<circle cx="3" cy="3" r="2" />
</g>
</defs>
<rect x="0" y="0" width="100" height="100" />
</svg>
</body>
</html>
|
|
07.01.2017, 08:51
|
|
Интересующийся
|
|
Регистрация: 24.11.2016
Сообщений: 11
|
|
Сообщение от рони
|
var newuse = document.createElementNS("http://www.w3.org/2000/svg", "use");
newuse.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#figure');
|
спасибо. буду знать )))))
не подскажешь, как добраться до имени файла или параметров его вызова?
в SVG в массиве описаны 8 позиций, на которых можно разместить элементы. нужно разместить 4 элемента.
как сделать на стороне сервера - понятно. хочу реализовать что-то типа:
<img src="01101001.svg"> или <img src="position.svg?pos=01101001">
и скрипт в svg сам, на стороне клиента, расставит элементы только на указанных позициях.
Последний раз редактировалось be@ver, 07.01.2017 в 10:36.
|
|
07.01.2017, 11:34
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
|
be@ver,
не понимаю или не знаю, то что вы спросили
|
|
07.01.2017, 13:04
|
|
Интересующийся
|
|
Регистрация: 24.11.2016
Сообщений: 11
|
|
function svgOnLoad(){
var container = document.querySelector('svg');
var txt = document.createElementNS('http://www.w3.org/2000/svg', 'text');
txt.setAttribute('x', '10');
txt.setAttribute('y', '200');
txt.setAttribute('style', 'font-size: 4;');
var t = document.createTextNode("1");
txt.appendChild(t);
container.appendChild(txt);
}
если открыть как svg, то текст добавляется, если открывать html файл с <img src="01101001.svg">, то текст не появляется... |
|
07.01.2017, 15:27
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
|
be@ver,
не могу ничем помочь
|
|
08.01.2017, 13:18
|
|
Интересующийся
|
|
Регистрация: 24.11.2016
Сообщений: 11
|
|
|
нашел причину:
скрипт внутри svg игнорируется, если svg вставлен как img. Решение: использовать iframe или object
|
|
|
|
