<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.
അനുമതി
ഈ സൃഷ്ടിയുടെ പകർപ്പവകാശ ഉടമയായ ഞാൻ, താഴെ പറയുന്ന അനുമതിയിൽ ഈ സൃഷ്ടി ഇതിനാൽ പ്രസിദ്ധീകരിക്കുന്നു:
പങ്ക് വെയ്ക്കൽ – കൃതി പകർത്താനും, വിതരണം ചെയ്യാനും, പ്രസരിപ്പിക്കാനും
പുനഃമിശ്രണം ചെയ്യൽ – കൃതി അനുയുക്തമാക്കാൻ
താഴെ പറയുന്ന ഉപാധികൾ പാലിക്കുക:
കടപ്പാട് – രചയിതാവോ അനുമതിയുള്ളയാളോ വ്യക്തമാക്കിയിട്ടുള്ള വിധത്തിൽ കൃതിയ്ക്കുള്ള കടപ്പാട് താങ്കൾ നൽകിയിരിക്കണം. താങ്കൾക്കിത് ഏത് വിധത്തിൽ വേണമെങ്കിലും ചെയ്യാവുന്നതാണ്, പക്ഷേ അത് അവർ താങ്കളേയോ താങ്കളുടെ ഉപയോഗത്തേയോ അടിച്ചേൽപ്പിച്ചതു പോലെയാവരുത്.
ഇതു പോലെ പങ്ക് വെയ്ക്കുക – ഈ സൃഷ്ടിയെ പുനഃമിശ്രണം ചെയ്തോ രൂപാന്തരപ്പെടുത്തിയോ അടിസ്ഥാനപ്പെടുത്തിയോ ഉണ്ടാക്കുന്നവ; താങ്കളുടെ സംഭാവനയടക്കമുള്ള സൃഷ്ടി യഥാർത്ഥ സൃഷ്ടിയുടെ അതേ അല്ലെങ്കിൽ അനുരൂപമായ ഉപയോഗാനുമതിയിൽ മാത്രമേ താങ്കൾ വിതരണം ചെയ്യാവൂ.
ഡിജിറ്റൽ ക്യാമറയോ, സ്കാനറോ ഉപയോഗിച്ച് നിർമ്മിച്ചപ്പോഴോ ഡിജിറ്റൈസ് ചെയ്തപ്പോഴോ ചേർക്കപ്പെട്ട അധികവിവരങ്ങൾ ഈ പ്രമാണത്തിലുണ്ട്. ഈ പ്രമാണം അതിന്റെ ആദ്യസ്ഥിതിയിൽ നിന്നും മാറ്റിയിട്ടുണ്ടെങ്കിൽ, ചില വിവരങ്ങൾ ഇപ്പോഴുള്ള പ്രമാണത്തെ പൂർണ്ണമായി പ്രതിനിധീകരിക്കണമെന്നില്ല.