HTML 代码：
<div class=”content“><svg …> … </svg></div>
CSS代码：
.content svg { vertical-align: middle;}
实用扩展：如何让 DIV 中的内容垂直居中？
1、首推 Flex 弹性布局
CSS 属性 flex 规定了弹性元素如何伸长或缩短以适应 flex 容器中的可用空间。假设有下面的 HTML 代码：
<div id=”content“>居中显示</div>
那么我们可以编写CSS代码：
#content{
display: flex;
justify-content: center;（水平居中）
align–items: center;（垂直居中）
}
2、行高（line–height）法
如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如：
p{
height:30px;
line–height:30px;
width:100px;
overflow:hidden;
}
这段代码可以达到让文字在段落中垂直居中的效果。
问题：css如何让< p/> 或其他标签与< svg/>在同一行显示？
用一个具有display: flex;属性的div来包括它们
HTML 代码：
<div class=”content“><p> … </p><svg …> … </svg></div>
CSS代码：
.box {
background: url(‘data:image/svg+xml;utf8,<svg …> … </svg>’);
}
不需要 Base64 转换…当然会有一些浏览器无法理解这种语法。
考虑到浏览器兼容性，用作背景图片时，建议将 SVG 编码为 Base64（或转义特定字符）:
background–image: url(“data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGV4dCB4PSI1MCUiIHk9IjUwJSIgZm9udC1zaXplPSIzMCIgZmlsbD0iI2EyYTliNiIgZmlsbC1vcGFjaXR5PSIwLjMiIGZvbnQtZmFtaWx5PSJzeXN0ZW0tdWksIHNhbnMtc2VyaWYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIHRyYW5zZm9ybT0ncm90YXRlKC00NSwgMTAwIDEwMCknPuawtOWNsOaWh+WtlzwvdGV4dD48L3N2Zz4=”);
//在svg 源文件的svg 头文件 加入 preserveAspectRatio=”none meet”
<?xml version=”1.0″ encoding=”UTF-8″?>
<svg width=”319px” height=”76px” viewBox=”0 0 319 76″ version=”1.1″ xmlns=”http://www.***/2000/svg” xmlns:xlink=”http://www.***.org/1999/xlink” preserveAspectRatio=”none meet”>
调试中发现元素的颜色始终为黑色，但我已经将其颜色更改为自定义颜色(例如蓝色)。 通过添加 style=”fill:#2C30FF”，但没效果，不显示我设置的颜色。
解决：“#”是URL中的保留字符，您需要将“#” 替换URL 编码为 %23， 如下：
background: url(‘data:image/svg+xml;utf-8,<?xml version=”1.0″ encoding=”utf-8″?><!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd“><svg xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” ><polygon points=”6,4.5 0,0 0,1.208 6,5.708 12,1.208 12,0″ style=”fill:%232C30FF;”/></svg>’);
1、<svg viewBox=”0 0 64 64″ class=”w-16 h-16 shrink-0″ xmlns=”http://www.w3.org/2000/svg”><circle cx=”32″ cy=”32″ r=”32″ fill=”#1238BF” fill-opacity=”0.2″></circle><circle cx=”32″ cy=”32″ r=”20″ fill=”#1238BF”></circle><path fill-rule=”evenodd” clip-rule=”evenodd” d=”M29.4428 36.2766L39.8391 24.5044L41.2445 25.7455L29.5627 38.9734L23.2302 32.9722L24.52 31.6112L29.4428 36.2766Z” fill=”#fff”></path></svg>
2、<svg viewBox=”0 0 64 64″ class=”w-16 h-16 shrink-0″ xmlns=”http://www.w3.org/2000/svg”><circle cx=”32″ cy=”32″ r=”32″ fill=”#E53A3A” fill-opacity=”0.2″></circle><circle cx=”32″ cy=”32″ r=”20″ fill=”#E53A3A”></circle><path d=”M26 26L38 38″ stroke-width=”2″ stroke-linecap=”square” stroke=”#fff”></path><path d=”M38 26L26 38″ stroke-width=”2″ stroke-linecap=”square” stroke=”#fff”></path></svg>
原文地址:https://blog.csdn.net/CS41806516/article/details/134527468
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_8063.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
