在vue中动态加载svg图形

问题描述

我有一个包含多个svgs的Object

"svgs" :  {
  "1" : "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"800\" height=\"600\" viewBox=\"0 0 800 600\">\n<path d=\"M93.249,600 L93.249,302.835 L93.2873,301.059 L93.4069,299.224 L93.6141,297.334 L93.9129,295.396 L94.3055,293.418 L94.7903,291.408 L95.3638,289.378 L96.0184,287.336 L96.7448,285.294 L97.5303,283.263 L99.2239,279.276 L100.984,275.448 L102.704,271.837 L192.711,0 L540.72,1.13687e-13 L540.72,116.694 L673.545,116.694 A33.2061 33.2061 0 0 1 706.751,149.901 L706.751,195.666 A33.2061 33.2061 0 0 1 673.545,228.872 L540.72,228.872 L540.72,381.145 L673.545,381.145 A33.2061 33.2061 0 0 1 706.751,414.352 L706.751,465.516 A33.2061 33.2061 0 0 1 673.545,498.722 L540.72,498.722 L540.72,600 L93.249,600 Z\" style=\"stroke:black;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<circle cx=\"301.888\" cy=\"215.684\" r=\"16.9664\" style=\"stroke:red;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<circle cx=\"423.965\" cy=\"132.045\" r=\"36.684\" style=\"stroke:red;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<circle cx=\"357.934\" cy=\"93.8932\" r=\"22.3983\" style=\"stroke:red;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<circle cx=\"275.762\" cy=\"132.045\" r=\"26.1256\" style=\"stroke:red;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<line x1=\"93.249\" y1=\"287.336\" x2=\"540.72\" y2=\"287.336\" style=\"stroke:lime;stroke-width:2;stroke-dasharray:10,3;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<path d=\"M285.075,213.403 A16.9664 16.9664 0 0 0 301.888,232.65\" style=\"stroke:blue;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<path d=\"M301.888,232.65 A16.9664 16.9664 0 0 0 318.7,213.403\" style=\"stroke:blue;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n</svg>\n",
  "2" : "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"800\" height=\"600\" viewBox=\"0 0 800 600\">\n<path d=\"M198.7,406.626 L199.716,403.388 L194.746,401.829 L198.7,406.626 Z\" style=\"stroke:black;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<path d=\"M800,464.441 L516.812,102.143 L400.037,193.269 L402.375,195.404 L398.631,195.345 L397.247,196.246 L395.84,197.203 L394.458,198.194 L393.149,199.189 L391.713,200.347 L390.312,201.549 L388.828,204.699 L387.141,207.018 L387.459,204.167 L388.488,200.842 L388.346,199.639 L388.172,198.37 L387.962,197.052 L387.716,195.711 L387.441,194.375 L387.144,193.072 L386.529,190.651 L383.724,188.169 L395.446,188.169 L389.489,152.507 L370.798,40.6673 L232.58,63.9993 L257.127,210.122 L260.294,209.005 L258.451,212.271 L258.582,213.892 L258.751,215.558 L258.961,217.218 L259.209,218.819 L259.555,220.684 L259.958,222.538 L262.082,225.332 L263.282,227.78 L261.021,226.257 L258.543,223.772 L257.408,223.35 L256.199,222.926 L254.929,222.513 L253.624,222.121 L252.309,221.759 L251.013,221.431 L248.577,220.88 L245.09,222.261 L250.434,211.89 L215.968,201.012 L107.776,166.876 L0,510.498 L147.024,556.611 L193.896,407.167 L192.752,406.808 L194.804,400.263 L205.207,403.525 L204.755,404.968 L201.984,404.099 L200.968,407.338 L202.864,411.678 L301.564,531.417 L500.993,348.197 L501.136,348.049 L496.871,342.593 L505.461,335.878 L512.429,344.793 L511.484,345.532 L678.6,559.333 L800,464.441 Z\" style=\"stroke:black;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<path d=\"M589.294,338.245 A21.7616 21.7616 0 0 1 623.584,311.442 L676.952,379.717 A21.7616 21.7616 0 0 1 642.661,406.52 L589.294,338.245 Z\" style=\"stroke:red;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<path d=\"M581.731,385.587 L619.543,433.961 L614.142,438.183 L576.33,389.809 L581.731,385.587 Z\" style=\"stroke:red;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<path d=\"M718.368,417.559 L722.59,422.96 L676.971,458.618 L672.749,453.217 L718.368,417.559 Z\" style=\"stroke:red;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<circle cx=\"501.448\" cy=\"206.611\" r=\"54.2199\" style=\"stroke:red;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<line x1=\"390.997\" y1=\"194.002\" x2=\"507.529\" y2=\"343.089\" style=\"stroke:lime;stroke-width:2;stroke-dasharray:10,3;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<line x1=\"253.818\" y1=\"218.314\" x2=\"396.476\" y2=\"194.232\" style=\"stroke:lime;stroke-width:2;stroke-dasharray:10,3;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<line x1=\"194.949\" y1=\"409.195\" x2=\"256.262\" y2=\"213.71\" style=\"stroke:lime;stroke-width:2;stroke-dasharray:10,3;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<line x1=\"627.775\" y1=\"244.105\" x2=\"506.375\" y2=\"338.996\" style=\"stroke:lime;stroke-width:2;stroke-dasharray:10,3;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<line x1=\"195.25\" y1=\"402.852\" x2=\"48.2261\" y2=\"356.738\" style=\"stroke:lime;stroke-width:2;stroke-dasharray:10,3;fill:none;font-size:16px;font-family:sans-serif;\"/>\n</svg>\n",                
  }

以及包含多个数据对象的对象，可以通过关联的id引用其中一个svgs

"articles" : [
  {
    "name" : "name0",
    "id" : "1"
  },
  {
    "name" : "name1",
    "id" : "0" 
  }

],

我的主应用程序现在应该为每个文章创建一个组件，并呈现相关的svg（如果存在）。

var app =
 new Vue(
  {
    el : "#app",
    data :
    {
       "projectName":"PJ",
       "articles" : [
        {
          "name" : "name0",
          "id" : "1"
        },
        {
          "name" : "name1",
          "id" : "0" 
        }
      ],
      "svgs" :  {
        "1" : "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"800\" height=\"600\" viewBox=\"0 0 800 600\">\n<path d=\"M93.249,600 L93.249,302.835 L93.2873,301.059 L93.4069,299.224 L93.6141,297.334 L93.9129,295.396 L94.3055,293.418 L94.7903,291.408 L95.3638,289.378 L96.0184,287.336 L96.7448,285.294 L97.5303,283.263 L99.2239,279.276 L100.984,275.448 L102.704,271.837 L192.711,0 L540.72,1.13687e-13 L540.72,116.694 L673.545,116.694 A33.2061 33.2061 0 0 1 706.751,149.901 L706.751,195.666 A33.2061 33.2061 0 0 1 673.545,228.872 L540.72,228.872 L540.72,381.145 L673.545,381.145 A33.2061 33.2061 0 0 1 706.751,414.352 L706.751,465.516 A33.2061 33.2061 0 0 1 673.545,498.722 L540.72,498.722 L540.72,600 L93.249,600 Z\" style=\"stroke:black;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<circle cx=\"301.888\" cy=\"215.684\" r=\"16.9664\" style=\"stroke:red;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<circle cx=\"423.965\" cy=\"132.045\" r=\"36.684\" style=\"stroke:red;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<circle cx=\"357.934\" cy=\"93.8932\" r=\"22.3983\" style=\"stroke:red;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<circle cx=\"275.762\" cy=\"132.045\" r=\"26.1256\" style=\"stroke:red;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<line x1=\"93.249\" y1=\"287.336\" x2=\"540.72\" y2=\"287.336\" style=\"stroke:lime;stroke-width:2;stroke-dasharray:10,3;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<path d=\"M285.075,213.403 A16.9664 16.9664 0 0 0 301.888,232.65\" style=\"stroke:blue;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<path d=\"M301.888,232.65 A16.9664 16.9664 0 0 0 318.7,213.403\" style=\"stroke:blue;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n</svg>\n",
        "2" : "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"800\" height=\"600\" viewBox=\"0 0 800 600\">\n<path d=\"M198.7,406.626 L199.716,403.388 L194.746,401.829 L198.7,406.626 Z\" style=\"stroke:black;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<path d=\"M800,464.441 L516.812,102.143 L400.037,193.269 L402.375,195.404 L398.631,195.345 L397.247,196.246 L395.84,197.203 L394.458,198.194 L393.149,199.189 L391.713,200.347 L390.312,201.549 L388.828,204.699 L387.141,207.018 L387.459,204.167 L388.488,200.842 L388.346,199.639 L388.172,198.37 L387.962,197.052 L387.716,195.711 L387.441,194.375 L387.144,193.072 L386.529,190.651 L383.724,188.169 L395.446,188.169 L389.489,152.507 L370.798,40.6673 L232.58,63.9993 L257.127,210.122 L260.294,209.005 L258.451,212.271 L258.582,213.892 L258.751,215.558 L258.961,217.218 L259.209,218.819 L259.555,220.684 L259.958,222.538 L262.082,225.332 L263.282,227.78 L261.021,226.257 L258.543,223.772 L257.408,223.35 L256.199,222.926 L254.929,222.513 L253.624,222.121 L252.309,221.759 L251.013,221.431 L248.577,220.88 L245.09,222.261 L250.434,211.89 L215.968,201.012 L107.776,166.876 L0,510.498 L147.024,556.611 L193.896,407.167 L192.752,406.808 L194.804,400.263 L205.207,403.525 L204.755,404.968 L201.984,404.099 L200.968,407.338 L202.864,411.678 L301.564,531.417 L500.993,348.197 L501.136,348.049 L496.871,342.593 L505.461,335.878 L512.429,344.793 L511.484,345.532 L678.6,559.333 L800,464.441 Z\" style=\"stroke:black;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<path d=\"M589.294,338.245 A21.7616 21.7616 0 0 1 623.584,311.442 L676.952,379.717 A21.7616 21.7616 0 0 1 642.661,406.52 L589.294,338.245 Z\" style=\"stroke:red;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<path d=\"M581.731,385.587 L619.543,433.961 L614.142,438.183 L576.33,389.809 L581.731,385.587 Z\" style=\"stroke:red;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<path d=\"M718.368,417.559 L722.59,422.96 L676.971,458.618 L672.749,453.217 L718.368,417.559 Z\" style=\"stroke:red;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<circle cx=\"501.448\" cy=\"206.611\" r=\"54.2199\" style=\"stroke:red;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<line x1=\"390.997\" y1=\"194.002\" x2=\"507.529\" y2=\"343.089\" style=\"stroke:lime;stroke-width:2;stroke-dasharray:10,3;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<line x1=\"253.818\" y1=\"218.314\" x2=\"396.476\" y2=\"194.232\" style=\"stroke:lime;stroke-width:2;stroke-dasharray:10,3;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<line x1=\"194.949\" y1=\"409.195\" x2=\"256.262\" y2=\"213.71\" style=\"stroke:lime;stroke-width:2;stroke-dasharray:10,3;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<line x1=\"627.775\" y1=\"244.105\" x2=\"506.375\" y2=\"338.996\" style=\"stroke:lime;stroke-width:2;stroke-dasharray:10,3;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<line x1=\"195.25\" y1=\"402.852\" x2=\"48.2261\" y2=\"356.738\" style=\"stroke:lime;stroke-width:2;stroke-dasharray:10,3;fill:none;font-size:16px;font-family:sans-serif;\"/>\n</svg>\n",                
      }
  }
)

以下列方式定义文章

Vue.component("project-article", {
 props : {article : {required : true}, svgs : {required : true}},
 template : `
  <div>
    <div>
      {{ image() }}
    </div>
    {{ article.name }}
  </div>
`,
 methods : {
  nodeId() { return this.article.id },
  svg() { return this.svgs[this.nodeId()] },
  image() { return this.svg().substring(this.svg().indexOf("<svg")); }
 }
})

如果我现在尝试加载我的HTML中的文章

<head>
 <title>GraphDialog</title>
 <script src="https://unpkg.com/vue"></script>
</head>
<body>
 <div id="app">
  {{ projectName }}
   <ul>
    <li v-for="article in articles">
     <project-article :article="article" :svgs="svgs"></project-article>
    </li>
   </ul>
 </div>
</body>

svg呈现为文本而不是图形。 如何让svgs呈现为图形？
如果我用浏览器中显示的实际代码替换{{image()}} ，它就可以工作