Question

我倾向于如何创建SVG并且正在弄乱Polygon标签。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <polygon points="0,0 0,12.5 12.5,25 0,37.5 0,50 12.5,50 25,37.5 37.5,50 50,50 50,37.5 37.5,25 50,12.5 50,0 37.5,0 25,12.5 12.5,0 0,0 " style="fill: grey; stroke: black; stroke-width: 1px" />
    <polygon points="0,0 0,12.5 12.5,0 0,0" style="fill: red;" onclick="avascript:enlargeiFrame1();" />
    <polygon points="50,0 50,12.5 37.5,0 50,0" style="fill: red;" onclick="javascript:enlargeiFrame2();" />
    <polygon points="50,50 50,37.5 37.5,50 50,50" style="fill: red;" onclick="javascript:enlargeiFrame3();" />
    <polygon points="0,50 0,37.5 12.5,50.5 0,50" style="fill: red;" onlcik="javascript:enlargeiFrame4();" />
</svg>

一切似乎都运转良好，但是当我在Chrome中加载它时，某些线路比其他线路更薄......这是一个众所周知的事情吗？这是为了解决这个问题吗？

提前致谢，

Ť

Answer 1

没有错误，与Chrome，Firefox和Safari显示的图像相同。您的问题是三角形位置与主多边形的笔划重叠。

作为一种解决方法，尝试使用fill-opacity:0.0添加相同的第一个多边形，但在其他多边形前面透明填充：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <polygon points="0,0 0,12.5 12.5,25 0,37.5 0,50 12.5,50 25,37.5 37.5,50 50,50 50,37.5 37.5,25 50,12.5 50,0 37.5,0 25,12.5 12.5,0 0,0 " style="fill: grey; stroke: black; stroke-width: 1px" />
    <polygon points="0,0 0,12.5 12.5,0 0,0" style="fill: red;" onclick="avascript:enlargeiFrame1();" />
    <polygon points="50,0 50,12.5 37.5,0 50,0" style="fill: red;" onclick="javascript:enlargeiFrame2();" />
    <polygon points="50,50 50,37.5 37.5,50 50,50" style="fill: red;" onclick="javascript:enlargeiFrame3();" />
    <polygon points="0,50 0,37.5 12.5,50.5 0,50" style="fill: red;" onlcik="javascript:enlargeiFrame4();" />    
    <polygon points="0,0 0,12.5 12.5,25 0,37.5 0,50 12.5,50 25,37.5 37.5,50 50,50 50,37.5 37.5,25 50,12.5 50,0 37.5,0 25,12.5 12.5,0 0,0 " style="stroke: black; stroke-width: 1px; fill-opacity:0.0;" />    
</svg>

或者只是调整三角形位置。

SVG多边形渲染问题

1 个答案: