<html>
<svg width="46" height="64" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="grid" width="8" height="8" patternUnits="userSpaceOnUse">
<path d="M 0 0 V 8 H 8" fill="none" stroke="lightgray" stroke-width="0.5"></path>
</pattern>
<g id="canvas">
<rect width="46" height="53" fill="url(#grid)" />
<path d="M 0,0 L 64,64" stroke="black" stroke-width="0.3"></path>
<path d="M 0,8 L 80, 88" stroke="red" stroke-width="0.3"></path>
<path id="path0" d="M 0,0 h8 v16" stroke="black" stroke-width=".9" fill="none">
</path>
<g stroke="black" stroke-width=".9" fill="none">
<path id="path1" d="M 8,16 ">
<animate id="first" attributeType="CSS" attributeName="stroke"
begin="0s;second.end+1s" from="black" to="rgba(230,230,230,1)" dur="200ms" fill = "freeze" />
<animate id="second" attributeType="CSS" attributeName="stroke"
begin="first.end+1s" from="rgba(230,230,230,1)" to="black" dur="200ms" fill = "freeze" />
</path></g>
<path id="path2" d="M 8,16" stroke="black" stroke-width=".9" fill="none">
<animate attributeType="CSS" attributeName="stroke"
begin="first.begin" from="rgba(230,230,230,1)" to="black" dur="200ms" fill = "freeze" />
<animate id="second" attributeType="CSS" attributeName="stroke"
begin="second.begin" from="black" to="rgba(230,230,230,1)" dur="200ms" fill = "freeze" />
</path>
</g>
</defs>
<use x=00 y=00 xlink:href="#canvas" transform="translate(002, 53) scale(1,-1)"/>
</svg>
<textarea id="area1" rows=15 cols=50></textarea>
<script language="javascript">
var svgNS = "http://www.w3.org/2000/svg";
var canvas = document.querySelector("svg")
function svg(name, props) {
var element = document.createElementNS(svgNS, name); //to create a circle, for rectangle use rectangle
for (key in props)
if(key=="xlink:href"){
element.setAttributeNS('http://www.w3.org/1999/xlink', 'href', props[key]);
}else{
element.setAttribute(key, props[key]);
}
//alert(element.outerHTML)
return canvas.appendChild(element);
}
function arrow(x, y, angle) {
var transform = "rotate(" + angle + ", "+ x + ", "+ y + ")"
svg("use", {x:x, y:y, "xlink:href":"#myarrow", transform:transform})
//alert(canvas.outerHTML)
}
var grid = document.querySelector("#grid").width.baseVal.value
var path = "hhvvvhh"
function pave(pathid) {
if (pathid == 2) path = path.replace(/h/g,1).replace(/v/g, 'h').replace(/1/g, 'v')
var svgpath = document.querySelector("#path" + pathid)
var d = svgpath.getAttribute("d")
for (var i = 0; i != path.length ;i++) {
d += " " + path[i] + grid
}
//arrowhead
if (path[path.length-1] == 'v')
d += " l -1.5,-1.5,3,0,-1.5,1.5"
else
d += " l -1.5,1.5,0,-3,1.5,1.5"
svgpath.setAttribute("d", d)
}
pave(1)
pave(2)
document.querySelector("#area1").value = canvas.outerHTML
</script>
</body></html>
Javascript updates SVG canvas on page load and exposes resulting file in textarea. In the second edition I actually highlighted the path flipping with animation but it seems does not play in Wikipedia.
Лицензирование
Я, владелец авторских прав на это произведение, добровольно публикую его на условиях следующей лицензии:
делиться произведением – копировать, распространять и передавать данное произведение
создавать производные – переделывать данное произведение
При соблюдении следующих условий:
атрибуция – Вы должны указать авторство, предоставить ссылку на лицензию и указать, внёс ли автор какие-либо изменения. Это можно сделать любым разумным способом, но не создавая впечатление, что лицензиат поддерживает вас или использование вами данного произведения.
распространение на тех же условиях – Если вы изменяете, преобразуете или создаёте иное произведение на основе данного, то обязаны использовать лицензию исходного произведения или лицензию, совместимую с исходной.
Файл содержит дополнительные данные, обычно добавляемые цифровыми камерами или сканерами. Если файл после создания редактировался, то некоторые параметры могут не соответствовать текущему изображению.