php 动态SVG图像生成问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1623242/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Problem with dynamic SVG image generation
提问by Kshitij Saxena -KJ-
I am trying to write a server side script (PHP) for generating an SVG image based on user input. I am using the following code:
我正在尝试编写一个服务器端脚本 (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>';
?>
I read somewhere that the MIME type must be svg+xml so I tried setting it in content-type as you can see above. The correct code is being received by Firefox but the image is not being rendered. Does somebody know what to change here?
我在某处读到 MIME 类型必须是 svg+xml，所以我尝试将它设置为内容类型，如上所示。Firefox 正在接收正确的代码，但未呈现图像。有人知道这里要改变什么吗？
回答by Pascal MARTIN
According to the SVG page on wikipedia, SVG should be served as image/svg+xml.
See also : 1.2 SVG MIME type, file name extension and Macintosh file type
根据维基百科上的SVG 页面，SVG 应该作为image/svg+xml.
另请参阅：1.2 SVG MIME 类型、文件扩展名和 Macintosh 文件类型
The following meta :
以下元：
<meta http-equiv="Content-Type" content="svg/xml" />
Doesn't define the way a content is served from a server -- it's more of a way to give that information, for HTML pages, when you can't define the way it's served...
And, I am not sure if the meta element is valid in the SVG specifications-- I'll let you check that ^^
不定义从服务器提供内容的方式——对于 HTML 页面，当您无法定义它的提供方式时，它更像是一种提供该信息的方式......
而且，我不确定meta 元素在SVG 规范中是有效的——我会让你检查一下 ^^
What you need to do, here, is send a HTTP headerfrom your server, indicating the content-type of your data.
在这里，您需要做的是从您的服务器发送一个 HTTP 标头，指示您的数据的内容类型。
This is done using the PHP headerfunction ; in your case :
这是使用 PHPheader函数完成的；在你的情况下：
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>';
Note :
笔记 ：
- I have removed the
<meta>and<head>tags ; not sure if the<head>should be removed, but, as it was empty.... - I've added the call to the
headerfunction - The SVG red circle is properly displayed by firefox -- so, seems to work ;-)
- 我已经删除了
<meta>和<head>标签；不确定是否<head>应该删除它，但是，因为它是空的.... - 我已经添加了对
header函数的调用 - SVG 红色圆圈由 firefox 正确显示 - 所以，似乎工作;-)
Hope this helps !
希望这可以帮助 ！
回答by Erik Dahlstr?m
Just saying that this:
就这么说吧：
<?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>
will work the same as this:
将与此相同：
<?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>
You can judge for yourself which is more readable/clean. If you use many svg fragments then it can make sense in some cases to put the xmlns-declarations on the html root element like in the first example.
您可以自己判断哪个更易读/更干净。如果您使用许多 svg 片段，那么在某些情况下将 xmlns-declarations 放在 html 根元素上是有意义的，就像在第一个示例中一样。
回答by luc
I've succeed to use svg in a xhtml document recently.
我最近成功地在 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>
The trick was to use the svg: prefix for every item. It needs to know the namespace to be correctly parsed by the browser.
诀窍是为每个项目使用 svg: 前缀。它需要知道命名空间才能被浏览器正确解析。
Then I doscovered Raphael Javascript library http://raphaeljs.com/which makes handling svg objects very easy.
然后我发现了 Raphael Javascript 库http://raphaeljs.com/，这使得处理 svg 对象变得非常容易。
I hope it helps
我希望它有帮助
