Question

我正在尝试在我的html页面中显示SVG图形;在页面中，在div中，我有这个代码：

<svg id="Scanvas" width="800" height="500" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs><style type="text/css">
        polygon{
            stroke: #168fdc;
            stroke-width: 5;
            fill: #95CFF4;
            opacity: 0.75;
            /*fill-rule: nonzero;*/
        }       
    </style></defs>
    <g transform="translate(152.45,250) scale(225,-225)">
        <polygon points="-0.5,1 0.5,1 0.5,-1 -0.5,-1"></polygon>
    </g>
</svg>

但该页面没有显示任何内容。更准确地说，在页面样式中，我为svg标签设置了一个背景，它显示了，但是里面没有显示任何元素。

如何正确显示内容？感谢

编辑：使用Google Chrome

EDIT2：在jsfiddle.net中尝试了相同的svg，并且在那里工作。查看源代码，似乎他们将样式放在html中的head标签内，但这在我的页面中不起作用

EDIT3：在多边形外面放置多边形显示：

<svg id="Scanvas" width="800" height="500" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <polygon points="0,0 10,0 10,10 0,10"></polygon>
    <g transform="translate(152.5,250) scale(225,-225)">
        <polygon points="-0.5,1 0.5,1 0.5,-1 -0.5,-1 "></polygon>
    </g>
</svg>

有人可以解释一下吗？

最后编辑最后我发现了问题：我没有提到我是用javascript创建svg多边形，并且由于名称空间问题（这是我所理解的）标签被创建但没有显示。在这里找到答案：How to make Chrome redraw SVG dynamically added content?。

Answer 1

如果有意义，您的多边形过度缩放。因此，您会在整个渲染区域看到多边形的渲染。

尝试将此修改后的代码加载到支持SVG的浏览器中：

<svg id="Scanvas" width="800" height="500" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs><style type="text/css">
        polygon{
            stroke: #168fdc;
            stroke-width: 5;
            fill: #95CFF4;
            opacity: 0.75;
            /*fill-rule: nonzero;*/
        }       
    </style></defs>
    <g transform="translate(152.45,250)">
        <polygon points="0,0 100,0 100,100 0,100"></polygon>
    </g>
</svg>

然后尝试这个：

<svg id="Scanvas" width="800" height="500" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs><style type="text/css">
        polygon{
            stroke: #168fdc;
            stroke-width: 5;
            fill: #95CFF4;
            opacity: 0.75;
            /*fill-rule: nonzero;*/
        }       
    </style></defs>
    <g transform="translate(152.45,250) scale(2,2)">
        <polygon points="0,0 100,0 100,100 0,100"></polygon>
    </g>
</svg>

这将让您知道要扩展多少。 Supose您已经阅读了polygon。

EDIT 代码在独立文件中进行了测试，仅包含SVG代码段。在Chromium下测试。绝对显示您的示例代码（如给定）的差异。在普通的Ubuntu下（如果这有任何差异）。

Answer 2

因为你的音阶是humongus，并且笔画宽度设置为5，这大于多边形本身的大小，所以唯一显示的是笔画。尝试设置stroke-width = .1

html中的SVG元素没有显示

2 个答案: