css - 用svg代码直接输入html一些问题和一些问题

Question

所以我在codepen.io上玩svg，我有几个问题

1. 为什么高度和宽度属性在 html 中没有影响（在 svg 的图像元素中找到）？我已经读过删除这些属性并使用 css 来调整大小是最佳实践，你怎么看？

2. 使用对象标签链接到 svg 文件是否允许与内联 svg 对 css 和 js 相同的可定制性？如果是，这是否比对链接图像有额外的 http 请求更重要？

3. 当需要图标时，最好使用字体图标还是 svg 图标？（字体图标对我来说是新的，它们是否允许使用 css 和 js 进行编辑？它们容易制作吗？它们的文件大小是否更小？）

4. 在这个特定的笔https://codepen.io/cole-pratt/pen/xxGdmRN中有两个图标。第一个图标有一个蓝色渐变，第二个图标应该有一个绿色渐变，但由于某种原因它采用了蓝色渐变，即使这些颜色是在每个元素中指定的（据我所知）假设内联是比对象标签更好，并且还假设 svg 比字体图标更合适 如何以最有效的方式解决这种颜色情况？

5. 关于以前的笔...我尝试使用 svg:hover 来更改填充颜色。即使应用了 height 属性，这也不起作用。有人有这个理由吗？

6. 我应该知道的关于 svg 和 html 的任何其他事情请开火

以下是来自笔的css。它非常无关紧要，但这个网站不允许我在没有一些代码的情况下发布

body {
  background-color: rgb(240,240,240);
  margin: 0 auto;
  padding: 0;
}

nav {
  margin: 0 auto;
  padding: 0;
  position: relative;
  display: flex;
  flex-flow: row-reverse norap;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 100px;
  background-color: white;
  box-shadow: 0px 15px 10px -15px grey;
}

svg {
  height: 75px;
  margin: 0 auto;
}

svg:hover {
  fill: white;
}

如果你已经读到这里，非常感谢。期待您的回复

标签： csssvg