前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >在博客园的markdow编辑器中使用SVG

在博客园的markdow编辑器中使用SVG

作者头像
绿巨人
发布2018-05-16 17:51:41
2.1K0
发布2018-05-16 17:51:41
举报
文章被收录于专栏:绿巨人专栏

SVG

SVG 意为可缩放矢量图形(Scalable Vector Graphics)。 SVG 使用 XML 格式定义图像。

问题

如果在博客园的markdow编辑器中直接使用SVG,由于保存时,markdown引擎会插入一些html标签,导致看不到图像。

解决方案

可以使用div标签或者table标签来解决这个问题。

  • 使用div
代码语言:javascript
复制
<div width="100%" style="overflow-x: auto;"> 
  <svg width="140" height="170">
    <title>SVG Sample</title>
    <desc>This is a sample to use SVG in markdown on the website cnblogs.</desc>
    <circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/>
  </svg>
</div>

示例:注意:在div前要有一个空行。

SVG Sample This is a sample to use SVG in markdown on the website cnblogs.

  • 使用table
代码语言:javascript
复制
<table>
  <tr>
    <td>
      <svg width="140" height="170">
        <title>SVG Sample</title>
        <desc>This is a sample to use SVG in markdown on the website cnblogs.</desc>
        <circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/>
      </svg>
    </td>
  </tr>
</table>

示例:注意:在table前要有一个空行。

graphviz: 一个可以通过文本产生图片的工具

访问: http://graphviz.org/

  • 编辑一个test.dot文件
代码语言:javascript
复制
digraph G {
    bgcolor="cornsilk"
    splines="FALSE";
    size="6,6";
    label="Spark Cluster + AKKA"
    node [colorscheme=paired12, color=1, style=filled];
    
    akka_client     [label="AKKA Client", color=1]
    akka_server     [label="AKKA Server (Spark)", color=2]
    spark_master    [label="Spark Master", color=3]
    spark_slave1    [label="Spark Slave", color=4]
    spark_slave2    [label="Spark Slave", color=4]
    spark_slave3    [label="Spark Slave", color=4]
    akka_client -> akka_server -> spark_master -> spark_slave1 [dir=both color=cadetblue]
    spark_master -> spark_slave2 [dir=both color=cadetblue] 
    spark_master -> spark_slave3 [dir=both color=cadetblue]
}
  • 运行命令:
代码语言:javascript
复制
C:\Tools\graphviz\bin\dot.exe test.dot -T svg -o test.svg
  • 生成以下图片:

References

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016-08-26 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • SVG
  • 问题
  • 解决方案
  • graphviz: 一个可以通过文本产生图片的工具
  • References
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档