动态SVG图像生成问题

我正在尝试编写一个基于用户输入生成SVG图像的服务器端脚本（PHP）。我使用下面的代码：动态SVG图像生成问题

<?php 

echo '<?xml version="1.0" standalone="no"?> 

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 

<head><meta http-equiv="Content-Type" content="svg+xml" /></head> 

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> 

<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> 

</svg>'; 

?>

我读的地方，MIME类型必须是SVG + XML的，所以我试着将它设置在内容类型，你可以在上面看到。 Firefox正在接收正确的代码，但图像未呈现。有人知道这里要改变什么吗？

来源

2009-10-26 Kshitij Saxena -KJ-

根据SVG page on wikipedia，应将SVG作为image/svg+xml。
参见：1.2 SVG MIME type, file name extension and Macintosh file type

下列元：

<meta http-equiv="Content-Type" content="svg/xml" />

没有定义内容从服务器提供服务的方式 - 它更多的方式，让这些信息，HTML页面，当你无法定义它的投放方式...
而且，我不知道，如果meta元素是在SVG specifications有效 - 我让你检查^^

您需要做的是，在这里，从您的服务器发送HTTP标头，指示您的数据的内容类型。

这是使用PHP header函数完成的;你的情况：

header('Content-type: image/svg+xml'); 

echo '<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> 
</svg>';

注：

我已删除了<meta>和<head>标签;不知道，如果<head>应该被删除，但是，因为它是空的....
我已经添加了调用header功能
SVG的红色圆圈正确Firefox浏览器显示的 - 因此，似乎工作;-)

希望这有助于！

来源

2009-10-26 05:44:13

谢谢:)我被困在这个很长的时间。它现在完美。 – 2009-10-26 06:08:01

@Pascal：是的，SVG中没有'head'，并且'meta'元素的用法不同。 – Boldewyn 2010-02-18 09:28:20

我最近成功地在xhtml文档中使用svg。

<?xml version='1.0'?> 
<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:svg="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <head><title>test</title></head> 
    <body> 
    <svg:svg id="display" width="500" heigth="500" viewBox="0 0 500 500"> 
     <svg:rect width="50" height="50" x="100" y="100" fill="red" stroke="black" /> 
    </svg:svg> 
    </body> 
</html>

诀窍是为每个项目使用svg：前缀。它需要知道由浏览器正确解析的名称空间。

然后我doscovered Raphael Javascript库http://raphaeljs.com/这使得处理svg对象非常容易。

我希望它能帮助

来源

2009-10-26 06:23:55 luc

您不需要在每个元素上使用前缀，只需将xmlns =“http://www.w3.org/2000/svg”放在最外层的 2009-10-26 11:47:11

... modulo正确的xmlns值 – 2009-10-26 11:48:53

哦，真的，我需要更改xmlns：svg吗？ – luc 2009-10-26 11:56:11

只是说这个：

<?xml version='1.0'?> 
<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:svg="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <head><title>test</title></head> 
    <body> 
    <svg:svg id="display" width="500" heigth="500" viewBox="0 0 500 500"> 
     <svg:rect width="50" height="50" x="100" y="100" fill="red" stroke="black" /> 
    </svg:svg> 
    </body> 
</html>

将工作与此相同：

<?xml version='1.0'?> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head><title>test</title></head> 
    <body> 
    <svg id="display" width="500" heigth="500" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
     <rect width="50" height="50" x="100" y="100" fill="red" stroke="black" /> 
    </svg> 
    </body> 
</html>

你可以自己判断哪个更可读/干净。如果你使用了许多svg片段，那么在某些情况下，像第一个例子中那样将xmlns声明放在html根元素上是有意义的。

来源

2009-10-26 18:35:38

动态SVG图像生成问题

回答

相关问题