主页 / 问题 / 1102094
Accepted
DarkRou
Asked:2020-03-29 00:21:22 +0000 UTC2020-03-29 00:21:22 +0000 UTC

将 SVG 文件添加到 HTML 的最佳方法是什么？

  • 772

我以前总是通过添加它们<img>，但最近我看到很多人用不同的方式添加它们，<svg><path>等等。问题是如何获得价值svg？与通常的方法相比，这种方法有什么优势<img>？

html

1 个回答

  1. Best Answer

    我以前总是通过添加它们<img>，但最近我看到很多人用不同的方式添加它们，

    当然，如果你只需要使用 SVG 作为图像，那么你可以这样添加。
    但是，使用这种方法，您将失去 SVG 的所有功能：样式、适应性、交互性 

    <img src="https://svg-art.ru/files/menubutton.svg" />

    其他方式如<img>

    1. 背景图片

     .container {
  width:500px;
  height:500px;
 background-image:url(https://image.flaticon.com/icons/svg/32/32441.svg);
   }
    <div class="container"></div>

    2.content: url() 

    .container {
  width:300px;
  height:300px;
 content: url(https://image.flaticon.com/icons/svg/32/32443.svg);
   }
    <div class="container"></div>

    笔记

    如果您想充分利用 SVG，那么将 svg 添加到 HTML 的最简单方法是将 SVG 代码直接复制到 HTML 中。

    所谓的内联方法 

    .container {
width:10%;
height:10%;
} 

 svg:hover > line {
stroke:dodgerblue;
}
    <div class="container">
 <svg viewBox="0 0 60 80"  xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink">
<line x1="20" y1="30" x2="50" y2="30" stroke="black" stroke-width="5" stroke-linecap="round"/>
<line x1="20" y1="40" x2="50" y2="40" stroke="black" stroke-width="5" stroke-linecap="round"/>
<line x1="20" y1="50" x2="50" y2="50" stroke="black" stroke-width="5" stroke-linecap="round"/>
</svg>
</div>

    目的

    将 SVG 文件添加到 HTML 的最常用方法 使用此方法，与使用 inline 方法一样，它变得可能：适应性、样式、交互性

    <object id="hud" type="image/svg+xml" data="https://svg-art.ru/files/images/hud1.svg"></object>

    对象与图像

    相同的文件以不同的方式添加。将鼠标悬停在上面，您会明白为什么在帮助下添加 SVG 会<object>好得多。 

    .img1, .obj1 {
font-size:18px;
}
    <p class="img1">  Add &lt;img&gt; </p> 
<img src="https://svg-art.ru/files/t1.svg" width="50px" height="50px" alt="image description"> 
<p class="obj1">  Add &lt;object&gt; </p> 
<object type="image/svg+xml" data="https://svg-art.ru/files/t1.svg" width="50px" height="50px" > </object>

    • 5

相关问题