javascript - 如何转换从数据库检索的 svg 源代码并将其呈现为 html 中的图像

标签 javascript php html svg

我有一个 svg 源代码作为 LONGTEXT 保存在 MYSQL 中。我的服务器端将检索它并将其发送到我正在使用 Angular 的前端。我的前端如何将其渲染为 html?

保存在 MYSQL 中的 svg 代码示例如下(我从某些地方复制只是为了举例):

<svg height="210" width="500">   
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/> 
  Sorry, your browser does not support inline SVG.
</svg>

这个 svg 的设计是一颗明星。当我的前端收到此代码时,它如何在 HTML 中将此代码呈现为星号?

最佳答案

大多数现代浏览器都支持 SVG 图像的渲染。如果您只是在页面上打印 SVG 内容,它将毫无问题地工作,就好像它是 IMG 标签一样。

如果您想支持旧版浏览器,例如 IE8 或非常旧版本的 Android 库存浏览器,则需要将 SVG 图像转换为其他格式,例如 PNG。这应该发生在服务器端。您可以使用 ImageMagick 等工具来实现此目的。

关于javascript - 如何转换从数据库检索的 svg 源代码并将其呈现为 html 中的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28228963/

相关文章:

javascript - 分离键值对并放入另一个数组中

javascript - 在每个击键时仅接受 Angular js中的整数和 float

html - 带有粘性标题和水平滚动的表格

javascript - 编写 HTML/CSS/JS 选项卡导航系统的最佳方式(无图像)

javascript - 为什么我的正则表达式在 RegexPal 中有效,但在运行 Javascript 时却无效?

javascript - 验证首次有效,但随后无效

php - 从字符串生成数组

php - 包括重复的 HTML block

php - 根据 PHP 或 Javascript IF 和 ELSE 测试的结果显示 Google Adsense 代码

html - 在不使用 flex-direction :column? 的情况下动态确保所有 flexbox 元素具有相同的最小宽度