如何使这个 SVG 响应?

我得到了一个 SVG,我必须将其添加到网页中,其中一些文本是用“Poppins”(谷歌)字体编写的。我假设 SVG 只是有关于要绘制哪个像素和哪种颜色的代码。当我使用标签添加 SVG 时<img>,它没有正确呈现。


然后我阅读了一些相关内容,了解到我需要在 SVG 中添加字体,并使用<object>标签正确渲染它。


我这样做了,现在它可以正确呈现,但我无法让它像标签一样响应<img>。我不明白我应该在哪里进行更改。


SVG: https: //www.opendemy.org/images/logo/test-logo.svg


.container {

  border: 5px solid black;

  width: 50%;

  background: #fff;

  }

<!doctype html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

</head>


<body>


<div class="container">


    <object data="https://www.opendemy.org/images/logo/test-logo.svg" type="image/svg+xml">

    </object>

</div>


</body>

</html>

^ 在这里,我试图将 SVG 插入一个盒子中,希望它能占据盒子的 100%,但它溢出了。我也尝试稍微调整 SVG 的代码,但没有任何帮助。


这些 SVG 是使用 MS powerpoint 生成的。


达令说
浏览 105回答 1
1回答

慕神8447489

您需要在 SVG 的源代码中替换widthand&nbsp;heightwith 。viewBox="0 0 1704 586"
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript