zoukankan      html  css  js  c++  java
  • 在博客园 Markdown 使用SVG 矢量图

    废话先不多说,直接上个图说明问题:

    R1
    R1
    R2
    R2
    R5
    R5
    R3
    R3
    R4
    R4
    I
    I
    U
    U
    I5
    I5
    Is1
    Is1
    Is2
    Is2
    Is3
    Is3
    # 聪明的小伙伴当然选择直接查看网页源代码了

    对就是网页源代码中,在博客园的 Markdown 格式的博客中,是可以解析一些 html 标签的,我用的就是简单的 <div> 与 <svg> 标签。通常的方法是下面这样的:

    <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>
    

    或者是

    <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>
    

    这样的
    那么代码可以转 SVG, 那么 SVG 可不可以转代码呢?
    这里我要吹爆 画图软件
    对,他可以直接讲 SVG 以源代码的格式导出,画图的时候以 SVG 源代码格式导出,直接放在 <div> 标签里面,就可以了:

    H
    H
    G
    G
    F
    F
    E
    E
    D
    D
    C
    C
    B
    B
    A
    A
    HA
    HA
    AB
    AB
    ABC
    ABC
    BC
    BC
    BCD
    BCD
    CD
    CD
    ED
    ED
    CDE
    CDE
    EF
    EF
    DEF
    DEF
    EFG
    EFG
    FG
    FG
    FGH
    FGH
    GH
    GH
    GHA
    GHA
    ABH
    ABH
    BDE
    BDE
    CDEF
    CDEF
    DEFG
    DEFG
    EFGH
    EFGH
    FGHA
    FGHA
    ABGH
    ABGH
    ABCH
    ABCH
    ABCD
    ABCD
    BCEF
    BCEF
    ABCGH
    ABCGH
    ABCDEFGH
    ABCDEFGH
    $nleft(w_{2}, 1 ight)$
    $nleft(w_{2}, 1 ight)$
  • 相关阅读:
    2014-04-23 总结
    14-5-13
    PHP
    14-5-8
    ajax
    14-5-6
    14-5-5
    PHP初解
    14-4-30
    14-4-29
  • 原文地址:https://www.cnblogs.com/wevolf/p/11025438.html
Copyright © 2011-2022 走看看