从数据库循环 svg 矩形答案

【问题标题】：Looping svg rectangles from database从数据库循环 svg 矩形
【发布时间】：2018-06-04 06:20:50
【问题描述】：

我正在使用 python 从数据库中读取 svg 矩形，我不知道这是否是正确的方法，因为我似乎在硬编码，这是因为我希望每个矩形在我的 css 样式表中更改颜色。有没有更好的方法来调用这些矩形而不是使用 ifs 和 elifs，因为如果我有 100 个矩形，那么更好的方法是什么。我也添加了我的样式表

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;
}

【问题讨论】：

页面上每个矩形的颜色是否唯一？
@dom_ahdigital 是的，悬停时颜色会改变
这不是我的问题。我想知道你是否会有 100 种不同的颜色，或者例如 10 种可以多次使用的颜色。
@dom_ahdigital 是的，我会的

标签： python css mysql svg

【解决方案1】：

据我从您的代码中可以看出，您应该能够做到：

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]))

【讨论】：