python - Flask 渲染 svg 文件，没有交互性

Question

我的 Flask 应用程序有一个创建 .svg 文件(使用 pygal)并在模板中渲染的路线。在应用程序中，没有交互功能，但是，如果我从文件浏览器打开相同的 .svg 文件，我会获得我想要的完整交互功能，例如悬停标签等。有关如何获得交互的任何想法悬停在我的路线上吗？

{% extends "base.html" %}
{% block content %}
<div class="container">
<h2 style="text-align:center;">Matrix of Concern for {{ company.companyname }}</H2>
<div class="container-fluid">
    <div class="row-fluid">
        <img src="{{plot|safe}}" alt="Image did not Load">
    </div>
</div>
</div>
{% endblock %}

这是传递给模板的绘图变量

<?xml version='1.0' encoding='utf-8'?>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" class="pygal-chart" id="chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg"><!--Generated with pygal 2.3.1 (etree) ©Kozea 2012-2016 on 2017-12-07--><!--http://pygal.org--><!--http://github.com/Kozea/pygal--><defs><style type="text/css">#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3{-webkit-user-select:none;-webkit-font-smoothing:antialiased;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .title{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:16px}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .legends .legend text{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:14px}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis text{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:10px}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis text.major{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:10px}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .text-overlay text.value{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:16px}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .text-overlay text.label{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:10px}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .tooltip{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:14px}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 text.no_data{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:64px}
#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3{background-color:rgba(249,249,249,1)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 path,#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 line,#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 rect,#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 circle{-webkit-transition:150ms;-moz-transition:150ms;transition:150ms}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .graph &gt; .background{fill:rgba(249,249,249,1)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .plot &gt; .background{fill:rgba(255,255,255,1)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .graph{fill:rgba(0,0,0,.87)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 text.no_data{fill:rgba(0,0,0,1)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .title{fill:rgba(0,0,0,1)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .legends .legend text{fill:rgba(0,0,0,.87)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .legends .legend:hover text{fill:rgba(0,0,0,1)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis .line{stroke:rgba(0,0,0,1)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis .guide.line{stroke:rgba(0,0,0,.54)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis .major.line{stroke:rgba(0,0,0,.87)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis text.major{fill:rgba(0,0,0,1)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis.y .guides:hover .guide.line,#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .line-graph .axis.x .guides:hover .guide.line,#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .stackedline-graph .axis.x .guides:hover .guide.line,#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .xy-graph .axis.x .guides:hover .guide.line{stroke:rgba(0,0,0,1)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis .guides:hover text{fill:rgba(0,0,0,1)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .reactive{fill-opacity:.7;stroke-opacity:.8}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .ci{stroke:rgba(0,0,0,.87)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .reactive.active,#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .active .reactive{fill-opacity:.8;stroke-opacity:.9;stroke-width:4}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .ci .reactive.active{stroke-width:1.5}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .series text{fill:rgba(0,0,0,1)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .tooltip rect{fill:rgba(255,255,255,1);stroke:rgba(0,0,0,1);-webkit-transition:opacity 150ms;-moz-transition:opacity 150ms;transition:opacity 150ms}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .tooltip .label{fill:rgba(0,0,0,.87)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .tooltip .label{fill:rgba(0,0,0,.87)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .tooltip .legend{font-size:.8em;fill:rgba(0,0,0,.54)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .tooltip .x_label{font-size:.6em;fill:rgba(0,0,0,1)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .tooltip .xlink{font-size:.5em;text-decoration:underline}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .tooltip .value{font-size:1.5em}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .bound{font-size:.5em}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .max-value{font-size:.75em;fill:rgba(0,0,0,.54)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .map-element{fill:rgba(255,255,255,1);stroke:rgba(0,0,0,.54) !important}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .map-element .reactive{fill-opacity:inherit;stroke-opacity:inherit}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .color-0,#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .color-0 a:visited{stroke:#F44336;fill:#F44336}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .text-overlay .color-0 text{fill:black}
#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 text.no_data{text-anchor:middle}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .guide.line{fill:none}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .centered{text-anchor:middle}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .title{text-anchor:middle}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .legends .legend text{fill-opacity:1}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis.x text{text-anchor:middle}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis.x:not(.web) text[transform]{text-anchor:start}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis.x:not(.web) text[transform].backwards{text-anchor:end}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis.y text{text-anchor:end}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis.y text[transform].backwards{text-anchor:start}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis.y2 text{text-anchor:start}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis.y2 text[transform].backwards{text-anchor:end}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis .guide.line{stroke-dasharray:4,4}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis .major.guide.line{stroke-dasharray:6,6}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .horizontal .axis.y .guide.line,#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .horizontal .axis.y2 .guide.line,#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .vertical .axis.x .guide.line{opacity:0}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .horizontal .axis.always_show .guide.line,#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .vertical .axis.always_show .guide.line{opacity:1 !important}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis.y .guides:hover .guide.line,#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis.y2 .guides:hover .guide.line,#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis.x .guides:hover .guide.line{opacity:1}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis .guides:hover text{opacity:1}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .nofill{fill:none}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .subtle-fill{fill-opacity:.2}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .dot{stroke-width:1px;fill-opacity:1}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .dot.active{stroke-width:5px}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .dot.negative{fill:transparent}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 text,#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 tspan{stroke:none !important}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .series text.active{opacity:1}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .tooltip rect{fill-opacity:.95;stroke-width:.5}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .tooltip text{fill-opacity:1}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .showable{visibility:hidden}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .showable.shown{visibility:visible}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .gauge-background{fill:rgba(229,229,229,1);stroke:none}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .bg-lines{stroke:rgba(249,249,249,1);stroke-width:2px}</style><script type="text/javascript">window.pygal = window.pygal || {};window.pygal.config = window.pygal.config || {};window.pygal.config['9aa1b551-e893-4065-bf16-b5022bb4e8e3'] = {"allow_interruptions": false, "box_mode": "extremes", "classes": ["pygal-chart"], "css": ["file://style.css", "file://graph.css"], "defs": [], "disable_xml_declaration": false, "dots_size": 2.5, "dynamic_print_values": false, "explicit_size": false, "fill": false, "force_uri_protocol": "https", "formatter": null, "half_pie": false, "height": 600, "include_x_axis": false, "inner_radius": 0, "interpolate": null, "interpolation_parameters": {}, "interpolation_precision": 250, "inverse_y_axis": false, "js": ["//kozea.github.io/pygal.js/2.0.x/pygal-tooltips.min.js"], "legend_at_bottom": false, "legend_at_bottom_columns": null, "legend_box_size": 12, "logarithmic": false, "margin": 20, "margin_bottom": null, "margin_left": null, "margin_right": null, "margin_top": null, "max_scale": 16, "min_scale": 4, "missing_value_fill_truncation": "x", "no_data_text": "No data", "no_prefix": false, "order_min": null, "pretty_print": false, "print_labels": true, "print_values": false, "print_values_position": "center", "print_zeroes": true, "range": null, "rounded_bars": null, "secondary_range": null, "show_dots": true, "show_legend": true, "show_minor_x_labels": true, "show_minor_y_labels": true, "show_only_major_dots": false, "show_x_guides": false, "show_x_labels": true, "show_y_guides": true, "show_y_labels": true, "spacing": 10, "stack_from_top": false, "strict": false, "stroke": false, "stroke_style": null, "style": {"background": "rgba(249, 249, 249, 1)", "ci_colors": [], "colors": ["#F44336", "#3F51B5", "#009688", "#FFC107", "#FF5722", "#9C27B0", "#03A9F4", "#8BC34A", "#FF9800", "#E91E63", "#2196F3", "#4CAF50", "#FFEB3B", "#673AB7", "#00BCD4", "#CDDC39", "#9E9E9E", "#607D8B"], "font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "foreground": "rgba(0, 0, 0, .87)", "foreground_strong": "rgba(0, 0, 0, 1)", "foreground_subtle": "rgba(0, 0, 0, .54)", "guide_stroke_dasharray": "4,4", "label_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "label_font_size": 10, "legend_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "legend_font_size": 14, "major_guide_stroke_dasharray": "6,6", "major_label_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "major_label_font_size": 10, "no_data_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "no_data_font_size": 64, "opacity": ".7", "opacity_hover": ".8", "plot_background": "rgba(255, 255, 255, 1)", "stroke_opacity": ".8", "stroke_opacity_hover": ".9", "title_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "title_font_size": 16, "tooltip_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "tooltip_font_size": 14, "transition": "150ms", "value_background": "rgba(229, 229, 229, 1)", "value_colors": [], "value_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "value_font_size": 16, "value_label_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "value_label_font_size": 10}, "title": "Matrix of Concern", "tooltip_border_radius": 0, "tooltip_fancy_mode": true, "truncate_label": null, "truncate_legend": null, "width": 800, "x_label_rotation": 0, "x_labels": null, "x_labels_major": null, "x_labels_major_count": null, "x_labels_major_every": null, "x_title": null, "xrange": null, "y_label_rotation": 0, "y_labels": null, "y_labels_major": null, "y_labels_major_count": null, "y_labels_major_every": null, "y_title": null, "zero": 0, "legends": ["ob-dl"]}</script><script type="text/javascript" xlink:href="https://kozea.github.io/pygal.js/2.0.x/pygal-tooltips.min.js" /></defs><title>Matrix of Concern</title><g class="graph xy-graph vertical"><rect class="background" height="600" width="800" x="0" y="0" /><g class="plot" transform="translate(112, 46)"><rect class="background" height="514" width="668.0" x="0" y="0" /><g class="axis y"><path class="line" d="M0.000000 514.000000 h668.000000" /><g class="guides"><path class="guide line" d="M0.000000 472.433925 h668.000000" /><text class="" x="-5" y="475.93392504930966">20</text><title>20</title></g><g class="guides"><path class="guide line" d="M0.000000 430.191979 h668.000000" /><text class="" x="-5" y="433.6919789612097">40</text><title>40</title></g><g class="guides"><path class="guide line" d="M0.000000 387.950033 h668.000000" /><text class="" x="-5" y="391.4500328731098">60</text><title>60</title></g><g class="guides"><path class="guide line" d="M0.000000 345.708087 h668.000000" /><text class="" x="-5" y="349.20808678500987">80</text><title>80</title></g><g class="guides"><path class="major guide line" d="M0.000000 303.466141 h668.000000" /><text class="major" x="-5" y="306.9661406969099">100</text><title>100</title></g><g class="guides"><path class="guide line" d="M0.000000 261.224195 h668.000000" /><text class="" x="-5" y="264.72419460880997">120</text><title>120</title></g><g class="guides"><path class="guide line" d="M0.000000 218.982249 h668.000000" /><text class="" x="-5" y="222.48224852071007">140</text><title>140</title></g><g class="guides"><path class="guide line" d="M0.000000 176.740302 h668.000000" /><text class="" x="-5" y="180.24030243261012">160</text><title>160</title></g><g class="guides"><path class="guide line" d="M0.000000 134.498356 h668.000000" /><text class="" x="-5" y="137.99835634451017">180</text><title>180</title></g><g class="guides"><path class="major guide line" d="M0.000000 92.256410 h668.000000" /><text class="major" x="-5" y="95.75641025641028">200</text><title>200</title></g><g class="guides"><path class="guide line" d="M0.000000 50.014464 h668.000000" /><text class="" x="-5" y="53.514464168310326">220</text><title>220</title></g></g><g class="axis x"><g class="guides"><path class="axis line" d="M12.846154 0.000000 v514.000000" /><text class="" x="12.846153846153845" y="529.0">0</text><title>0</title></g><g class="guides"><path class="guide line" d="M146.716036 0.000000 v514.000000" /><text class="" x="146.7160355276237" y="529.0">100</text><title>100</title></g><g class="guides"><path class="guide line" d="M280.585917 0.000000 v514.000000" /><text class="" x="280.5859172090935" y="529.0">200</text><title>200</title></g><g class="guides"><path class="guide line" d="M414.455799 0.000000 v514.000000" /><text class="" x="414.45579889056336" y="529.0">300</text><title>300</title></g><g class="guides"><path class="guide line" d="M548.325681 0.000000 v514.000000" /><text class="" x="548.3256805720332" y="529.0">400</text><title>400</title></g></g><g class="series serie-0 color-0" /></g><g class="titles"><text class="title plot_title" x="400.0" y="26">Matrix of Concern</text></g><g class="plot overlay" transform="translate(112, 46)"><g class="series serie-0 color-0"><g class="dots"><a target="_blank" xlink:href="http://127.0.0.1:5000/graph/12467966"><desc class="xlink">http://127.0.0.1:5000/graph/12467966</desc><desc class="label">Pikachu</desc><circle class="dot reactive tooltip-trigger" cx="12.846153846153845" cy="22.557199211045372" r="2.5" /><desc class="value">0: 233</desc><desc class="x ">12.846153846153845</desc><desc class="y ">22.557199211045372</desc></a></g><g class="dots"><a target="_blank" xlink:href="http://127.0.0.1:5000/graph/12467967"><desc class="xlink">http://127.0.0.1:5000/graph/12467967</desc><desc class="label">Eevee</desc><circle class="dot reactive tooltip-trigger" cx="12.846153846153845" cy="472.43392504930966" r="2.5" /><desc class="value">0: 20</desc><desc class="x top">12.846153846153845</desc><desc class="y top">472.43392504930966</desc></a></g><g class="dots"><a target="_blank" xlink:href="http://127.0.0.1:5000/graph/12467968"><desc class="xlink">http://127.0.0.1:5000/graph/12467968</desc><desc class="label">Snorlax</desc><circle class="dot reactive tooltip-trigger" cx="12.846153846153845" cy="487.21860618014466" r="2.5" /><desc class="value">0: 13</desc><desc class="x top">12.846153846153845</desc><desc class="y top">487.21860618014466</desc></a></g><g class="dots"><a target="_blank" xlink:href="http://127.0.0.1:5000/graph/12467969"><desc class="xlink">http://127.0.0.1:5000/graph/12467969</desc><desc class="label">Charizard</desc><circle class="dot reactive tooltip-trigger" cx="12.846153846153845" cy="499.8911900065746" r="2.5" /><desc class="value">0: 7</desc><desc class="x top">12.846153846153845</desc><desc class="y top">499.8911900065746</desc></a></g><g class="dots"><a target="_blank" xlink:href="http://127.0.0.1:5000/graph/12467970"><desc class="xlink">http://127.0.0.1:5000/graph/12467970</desc><desc class="label">Charmander</desc><circle class="dot reactive tooltip-trigger" cx="12.846153846153845" cy="172.51610782380016" r="2.5" /><desc class="value">0: 162</desc><desc class="x ">12.846153846153845</desc><desc class="y ">172.51610782380016</desc></a></g><g class="dots"><a target="_blank" xlink:href="http://127.0.0.1:5000/graph/12467971"><desc class="xlink">http://127.0.0.1:5000/graph/12467971</desc><desc class="label">Squirtle</desc><circle class="dot reactive tooltip-trigger" cx="58.62965338121652" cy="371.0532544378698" r="2.5" /><desc class="value">34.2: 68</desc><desc class="x top">58.62965338121652</desc><desc class="y top">371.0532544378698</desc></a></g><g class="dots"><a target="_blank" xlink:href="http://127.0.0.1:5000/graph/12467972"><desc class="xlink">http://127.0.0.1:5000/graph/12467972</desc><desc class="label">Gengar</desc><circle class="dot reactive tooltip-trigger" cx="12.846153846153845" cy="316.1387245233399" r="2.5" /><desc class="value">0: 94</desc><desc class="x top">12.846153846153845</desc><desc class="y top">316.1387245233399</desc></a></g><g class="dots"><a target="_blank" xlink:href="http://127.0.0.1:5000/graph/12467973"><desc class="xlink">http://127.0.0.1:5000/graph/12467973</desc><desc class="label">Dragonite</desc><circle class="dot reactive tooltip-trigger" cx="655.1538461538461" cy="504.11538461538464" r="2.5" /><desc class="value">479.8: 5</desc><desc class="x left top">655.1538461538461</desc><desc class="y left top">504.11538461538464</desc></a></g><g class="dots"><a target="_blank" xlink:href="http://127.0.0.1:5000/graph/12467974"><desc class="xlink">http://127.0.0.1:5000/graph/12467974</desc><desc class="label">Bulbasaur</desc><circle class="dot reactive tooltip-trigger" cx="12.846153846153845" cy="9.884615384615415" r="2.5" /><desc class="value">0: 239</desc><desc class="x ">12.846153846153845</desc><desc class="y ">9.884615384615415</desc></a></g><g class="dots"><a target="_blank" xlink:href="http://127.0.0.1:5000/graph/12467975"><desc class="xlink">http://127.0.0.1:5000/graph/12467975</desc><desc class="label">Jiggleypuff</desc><circle class="dot reactive tooltip-trigger" cx="12.846153846153845" cy="81.6959237343853" r="2.5" /><desc class="value">0: 205</desc><desc class="x ">12.846153846153845</desc><desc class="y ">81.6959237343853</desc></a></g><g class="dots"><a target="_blank" xlink:href="http://127.0.0.1:5000/graph/12467976"><desc class="xlink">http://127.0.0.1:5000/graph/12467976</desc><desc class="label">Lapras</desc><circle class="dot reactive tooltip-trigger" cx="250.46519383076281" cy="504.11538461538464" r="2.5" /><desc class="value">177.5: 5</desc><desc class="x top">250.46519383076281</desc><desc class="y top">504.11538461538464</desc></a></g></g></g><g class="plot text-overlay" transform="translate(112, 46)"><g class="series serie-0 color-0"><text class="label" x="28.846153846153847" y="43.89053254437871">Pikachu</text><text class="label" x="28.846153846153847" y="493.767258382643">Eevee</text><text class="label" x="28.846153846153847" y="508.551939513478">Snorlax</text><text class="label" x="28.846153846153847" y="521.2245233399079">Charizard</text><text class="label" x="28.846153846153847" y="193.8494411571335">Charmander</text><text class="label" x="74.62965338121651" y="392.3865877712031">Squirtle</text><text class="label" x="28.846153846153847" y="337.4720578566732">Gengar</text><text class="label" x="671.1538461538461" y="525.448717948718">Dragonite</text><text class="label" x="28.846153846153847" y="31.217948717948747">Bulbasaur</text><text class="label" x="28.846153846153847" y="103.02925706771863">Jiggleypuff</text><text class="label" x="266.4651938307628" y="525.448717948718">Lapras</text></g></g><g class="plot tooltip-overlay" transform="translate(112, 46)"><g class="tooltip" style="opacity: 0" transform="translate(0 0)"><rect class="tooltip-box" height="0" rx="0" ry="0" width="0" /><g class="text" /></g></g><g class="legends" transform="translate(10, 56)"><g class="legend reactive activate-serie" id="activate-serie-0"><rect class="color-0 reactive" height="12" width="12" x="0.0" y="1.0" /><text x="17.0" y="11.2">ob-dl</text></g></g><g class="legends" transform="translate(790, 56)" /></g></svg>

生成页面的源代码-

<!DOCTYPE html>
<html>
  <head>
    <title></title>
<!-- favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/favicons/favicon-16x16.png">
<link rel="manifest" href="/static/favicons/manifest.json">
<link rel="mask-icon" href="/static/favicons/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">

    <!-- Bootstrap -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<style>
nav {
    margin-left: 0.25in;
}
.navbar-nav {
    padding-top: 1em;
}
.nav-item {
    padding-right: 1em;
}
nav img {
    width: 0.5in;
    margin-right: 1em;
}
a#userinfo {
    color: gray;
}
</style>
<nav>
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="/design_list">
        <img src="/static/pcbevo-logo.png">
      </a>
    </div>
    <ul class="nav navbar-nav">

      <li class="active"><a href="/">Home</a></li>
      <li><a href="/help">Help</a></li>
      <li><a href="/changes">Changes</a></li>
      <li><a href="/logout">Logout</a></li>
      <li><a id="userinfo"href="#">User: timothy</a></li>


      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Admin
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="/error_listing">Error Listing</a></li>
        </ul>
      </li>

    </ul>
  </div>
</nav>



<div class="container">


<h2 style="text-align:center;">Matrix of Concern for ACME</H2>

<div class="container-fluid">
    <div class="row-fluid">
        <img src="/gen/5f64cddf0a90b44c/tmp_2d48sq2.svg" alt="Image did not Load">

    </div>
</div>

</div>



<style>
#footer {
    margin-left: .25in;
}
#footer p {
    font-size: 70%;
    margin-top: 6px;
    color: gray;
}
#footer hr {
    height: 2px;
}
</style>
<div id="footer">
    <hr>
    <p>Copyright &copy; 2017 PCBevo Pty. Ltd.<br>All rights reserved.</p>
</div>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

  </body>
</html>

Answer 1

当您将 SVG 作为图像加载时，在本例中是通过 <img>标记它不是交互式的。这是一般规则，并非特定于 Flask。

图像中的 SVG 具有与光栅图像相同的功能，因此可以在相同的情况下使用它们，而无需特别考虑其安全和隐私影响。