css SVG未显示[已关闭]

pxyaymoc 于 2023-02-17 发布在其他

关注(0)|答案(4)|浏览(172)

- 已关闭。**此问题为not reproducible or was caused by typos。当前不接受答案。

这个问题是由打字错误或无法再重现的问题引起的。虽然类似的问题在这里可能是on-topic，但这个问题的解决方式不太可能帮助未来的读者。
3天前关闭。
Improve this question
我有一个关闭按钮，我想显示在我的网页右上角。
svg的代码如下

.icon {
    width: 24px;
    height: 24px;
    /* changes to the fill do nothing */
    fill: currentColor;
}

<svg class="icon">
<use xlink:href="#close" />
</svg>

<!-- some more code -->

<!-- SVG Icon Library -->
<svg style="display: none;">
<symbol id=close viewBox="0 0 24 24">
    <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
</symbol>
</svg>

图标未显示在页面上
下面是另一个图标的例子。这个图标...
一个二个一个一个
这些例子或多或少是相同的，我不知道为什么不显示svg。
我尝试改变svg的大小，但是开发工具显示图标大小正常。对fill属性的更改也没有任何作用。其他svg的工作正常，关闭图标也应该如此

css

来源：https://stackoverflow.com/questions/75423262/svg-not-showing-up

4条答案

按热度按时间

vojdkbi01#

我不确定这是否有帮助，但是我处理svg的方法是制作一个图像，而不是将实际的svg代码放入html中，这简化了处理viewBox属性的过程，而是将svg导入到我的项目中。然后在我的css或html中使用它，这取决于它是什么类型的svg。然后在css中我将设置所需的宽度和高度，我就完成了。示例如下。

body {

  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

}

#MySQL {

  width: 200px;
  height: 200px;

}

<!DOCTYPE html>
<html lang="en" theme="">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style.css">
   <title>Example</title>
</head>
<body>
   
   <img src="https://svgshare.com/i/qCH.svg" alt="MySQL" id="MySQL">

</body>
</html>

赞(0）回复(0）举报 2023-02-17

pes8fvy92#

现在是2023年
IE浏览器已经死了。
所有现代浏览器都支持原生JavaScript Web组件
(and在过去的***5年***!（自Edge改用Chromium后）
不需要oldskool <symbol> mumbo珍宝
我们可以编写 * 语义 * HTML来显示SVG图标

<svg-icon></svg-icon>
   <svg-icon is="info"></svg-icon>
   <svg-icon is="close"></svg-icon>

输出：

需要的所有代码：

- 注意!这完全无关紧要当**您定义自定义元素时，所有已创建（但 * 未定义 *）的标记将自动升级。

x一个一个一个一个x一个一个二个一个x一个一个三个一个

赞(0）回复(0）举报 2023-02-17

kpbwa7wx3#

如果图标是标准的，众所周知的，不是原创的，不是设计师，那么你可以使用***谷歌字符字体***。
从谷歌图标的选择和连接可以查看here
材料图标有五种样式和一系列可下载的大小和密度。图标是基于核心材料设计原则和指标。
选择所需的图标并按名称添加到HTML中：例如，单击图标名称info并复制代码。
下面是一个使用close和info图标的例子。增加了悬停在图标上时的颜色变化。

.material-symbols-outlined {
  margin: 10px;
  transition: transform 0.4s ease-in-out;
}
.material-symbols-outlined:hover {
  transform: scale(2);
  color:red;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<span class="material-symbols-outlined"> close</span> 
 <span class="material-symbols-outlined">info</span>

赞(0）回复(0）举报 2023-02-17

b5buobof4#

几个问题：

ID属性没有用引号括起来（显然，大多数Firefox和Chromium都相当宽容）
currentColor需要在<symbol>或<path>级别上指定-否则，填充颜色将恢复为黑色。
- - 仔细检查您的ID是否重复**

.icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

p{
  color:red
}

.green{
  color:green
}

<p><svg class="icon">
    <use href="#close" />
  </svg>
</p>
<p class="green">
  <svg class="icon">
    <use href="#info-outline" />
  </svg>
</p>

<!-- SVG Icon Library -->
<svg style="width:0; height:0;">
  <symbol id="close" viewBox="0 0 24 24" fill="currentColor">
    <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
  </symbol>
  <symbol id="info-outline" viewBox="0 0 24 24" fill="currentColor">
    <path d="M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z" />
  </symbol>
</svg>

赞(0）回复(0）举报 2023-02-17

我来回答

css SVG未显示[已关闭]

4条答案

相关问题

热门标签

最新问答