从数据库中循环SVG矩形 [英] Looping svg rectangles from database
本文介绍了从数据库中循环SVG矩形的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用python从数据库读取svg矩形，我不知道这是否正确，因为我似乎正在对它进行硬编码，因为我希望每个矩形都可以更改css样式表中的颜色.有没有比使用ifs和elifs更好的方法来调用这些矩形，因为如果我有100个矩形，什么是更好的方法呢?我也添加了样式表
I am reading svg rectangles from a databse using python, I don't know if this is the right way, as it seems I am hardcoding, this because I want each rectangle to change colours in my css style sheet. Is there a better way to call these rectangles rather than using ifs and elifs because if I have 100 rectangles, what is the better way to do it. I have added my stylesheet aswell
for row in c:
box_x = ((row[3]-row[1])/2 + row[1] - 0.25)
box_y = ((row[4]-row[2])/2 + row[2] - 0.25)
move1 = box_y * 2
try1 = row[1] * 2
if row[0] == 1:
print('<rect id= rectangle1 class= "rectangles" onmousemove="myFunction3()" x=',row[1],' y=',row[2],' width=',row[3]-row[1],' height=',row[4]-row[2],'><title>Owned by',row[6],'</title></rect>')
elif row[0] == 2:
print('<rect id="rectangle2" class= "rectangles" onmousemove="myFunction3()" x=',row[1],' y=',row[2],' width=',row[3]-row[1],' height=',row[4]-row[2],'><title>Owned by',row[6],'</title></rect>')
elif row[0] == 3:
print('<rect id="rectangle3" class= "rectangles" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onmousemove="myFunction3()" x=',row[1],' y=',row[2],' width=',row[3]-row[1],' height=',row[4]-row[2],'><title>Owned by',row[6],'</title></rect>')
elif row[0] == 4:
print('<rect id="rectangle4" class= "rectangles" onmousemove="myFunction3()" x=',row[1],' y=',row[2],' width=',row[3]-row[1],' height=',row[4]-row[2],'><title>Owned by',row[6],'</title></rect>')
elif row[0] == 5:
print('<rect id="rectangle5" class= "rectangles" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onmousemove="myFunction3()" x=',row[1],' y=',row[2],' width=',row[3]-row[1],' height=',row[4]-row[2],'><title>Owned by',row[6],'</title></rect>')
elif row[0] == 6:
print('<rect id="rectangle6" class= "rectangles" onmousemove="myFunction3()" x=',row[1],' y=',row[2],' width=',row[3]-row[1],' height=',row[4]-row[2],'><title>Owned by',row[6],'</title></rect>')
elif row[0] == 7:
print('<rect id="rectangle7" class= "rectangles" onmousemove="myFunction3()" x=',row[1],' y=',row[2],' width=',row[3]-row[1],' height=',row[4]-row[2],'><title>Owned by',row[6],'</title></rect>')
else:
print('<rect id="rectangle8" class= "rectangles" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onmousemove="myFunction3()" x=',row[1],' y=',row[2],' width=',row[3]-row[1],' height=',row[4]-row[2],'><title>Owned by',row[6],'</title></rect>')
css样式表
.rectangles{
fill: #ff3333;
stroke: #000000;
stroke-width: 0.1;
}
#rectangle1:hover{
stroke: #FF7F00;
stroke-width: 0.1;
fill: #A52A2A;
}
#rectangle2:hover{
stroke: #FF7F00;
stroke-width: 0.1;
fill: #A52A2A;
}
#rectangle3:hover{
stroke: #FF7F00;
stroke-width: 0.1;
fill: #006400;
}
#rectangle4:hover{
stroke: #FF7F00;
stroke-width: 0.1;
fill: #000000;
}
#rectangle5:hover{
stroke: #FF7F00;
stroke-width: 0.1;
fill: #006400;
}
#rectangle6:hover{
stroke: #FF7F00;
stroke-width: 0.1;
fill: #000000;
}
#rectangle7:hover{
stroke: #FF7F00
stroke-width: 0.1;
fill: #FFFFFF;
}
#rectangle8:hover{
stroke: #FF7F00;
stroke-width: 0.1;
fill: #FFFFFF;
}
推荐答案
据我告诉您的代码，看来您应该能够做到:
As far as I can tell from you code, it looks like you should just be able to do:
for i, row in enumerate(c):
box_x = ((row[3]-row[1])/2 + row[1] - 0.25)
box_y = ((row[4]-row[2])/2 + row[2] - 0.25)
move1 = box_y * 2
try1 = row[1] * 2
print('<rect id="rectangle{0}" class="rectangles" x="{1}" y="{2}" width="{3}" height="{4}" onmousemove="myFunction3()"><title>Owned by {5}</title></rect>'.format(i, row[1], row[2], row[3] - row[1], row[4] - row[2], row[6]))
这篇关于从数据库中循环SVG矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
