在html和css中的引用svg(一)

问题:如何让 DIV 中的svg垂直居中?

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代码:

.content { display: flex;}

可以直接在 CSS 中直接使用 SVG:

.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 源文件的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">

即可实现svg自适应外部盒子宽高

问题:svg 图标颜色设置不生效

调试中发现元素的颜色始终为黑色,但我已经将其颜色更改为自定义颜色(例如蓝色)。 通过添加 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>');

(通用)好用的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>

相关推荐
264玫瑰资源库9 分钟前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端20 分钟前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED26 分钟前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪1 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程1 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常1 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
小杨升级打怪中1 小时前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
清风细雨_林木木1 小时前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
鸿蒙布道师2 小时前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt
袈裟和尚2 小时前
如何在安卓平板上下载安装Google Chrome【轻松安装】
前端·chrome·电脑