Flask呈现svg文件时没有交互性

2024-06-16 14:31:52 发布

您现在位置：Python中文网/ 问答频道 /正文
3376 3

我的flask应用程序有一个创建.svg文件（使用pygal）并在模板中呈现的路由。在应用程序中，没有交互功能，但是，如果我从我的文件浏览器打开相同的.svg文件，我就可以得到我想要的完整的交互功能，比如hover标签等。有什么想法可以让交互式悬停在我的路线上工作吗？在

{% 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 %}

下面是传递给模板的plot变量

^{pr2}$

来自生成页面的源代码-

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

Tags： divsrcpngstylecontainerlinkstaticli
1条回答
网友
1楼 · 发布于 2024-06-16 14:31:52

当您将SVG作为图像加载时，在本例中，通过<img>标记，它不是交互式的。这是一条一般规则，不是针对烧瓶的。在

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

相关问题 更多 >

    编程相关推荐