Question

当我使用内联SVG时，它完美无缺

<!DOCTYPE HTML>
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
          <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <title>SVG Image</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
        <style type="text/css">
        svg{
          position: absolute;
          left: 0;
          background-color: green;
        }
        </style>
        </head>
           <body>
              <div class="container-fluid">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 800">
                  <circle cx="1000" cy="400" r="100" style="stroke:white;stroke-width:2px;fill:white" />
                </svg>
              </div>
           </body>
        </html>

但是，如果我将这个大型SVG数据用作外部文件并将其作为对象嵌入主html文件中，则它不会呈现。这是主要的html文件

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>SVG Image</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
<style type="text/css">
svg{
  position: absolute;
  left: 0;
  background-color: green;
}
</style>
</head>
   <body>
      <div class="container-fluid">

        <object data="circle.svg" type="image/svg+xml" width="600" height="600"></object>

      </div>
   </body>
</html>

这是circle.svg文件

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 800">
<circle cx="1000" cy="400" r="100" style="stroke:white;stroke-width:2px;fill:white" />
</svg>

我确信，我错过了什么。任何帮助都将受到高度赞赏。

Answer 1

文档中没有<svg>标记，因此<style>标记中的样式并不指向任何内容。 CSS不适用跨文档，现在您有2个文档。最简单的方法是将样式应用于<object>标记，而不是主文档中的样式。

我已将对象数据转换为数据网址，以便它作为代码段运行，但它与您的问题中的标记相同。

＆＃13;

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>SVG Image</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
<style type="text/css">
object{
  position: absolute;
  left: 0;
  background-color: green;
}
</style>
</head>
   <body>
      <div class="container-fluid">

        <object data="data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDIwMDAgODAwIj4NCjxjaXJjbGUgY3g9IjEwMDAiIGN5PSI0MDAiIHI9IjEwMCIgc3R5bGU9InN0cm9rZTp3aGl0ZTtzdHJva2Utd2lkdGg6MnB4O2ZpbGw6d2hpdGUiIC8+DQo8L3N2Zz4=" type="image/svg+xml" width="600" height="600"></object>

      </div>
   </body>
</html>

＆＃13;

SVG作为对象VS内联SVG

1 个答案: