logo标签列表

在Vue中动态加载SVG图形

javascriptsvgvue.js
3
我有一个包含多个svg的对象，如下所示： 

"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引用其中一个svg

"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以文本形式而非图形形式呈现。 如何使SVG以图形形式呈现？
如果我用在浏览器中显示的实际代码替换{{image()}}，它可以正常工作。

1个回答
3
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接