SVG排版教程 | 样式背景属性详解与应用

最新推荐文章于 2023-11-13 08:39:15 发布
最新推荐文章于 2023-11-13 08:39:15 发布
阅读量952 收藏
点赞数
分类专栏： 原创教程 | SVG公众号互动排版 模板代码 | SVG公众号互动排版 文章标签： css html html5 新媒体运营 svg
转载请联系微信号：dong_dian_jun
本文链接：https://blog.csdn.net/h5course/article/details/122120834
版权

《元素属性原理详解与应用》讲到了SVG元素viewBox属性的实际应用，能够实现SVG元素在不同手机上的自适应适配（SVG元素的宽高根据手机屏幕大小等比例放大或缩小）。SVG黑科技排版的每一篇文章都少不了精美的图片，那我们如何在SVG元素上显示图片呢？SVG元素显示的图片在不同的手机上如何实现自适应适配呢？今天我们就来接触SVG样式背景属性。

SVG图形的限制

SVG可以绘制各种各样的矢量图形，也可以通过滤镜、渐变等方式丰富图形的色彩，当然还可以通过JavaScript脚本提升图形的交互性，但是有些代码方式公众号平台是不支持的（比如style元素、script元素），不能够完美展示色彩和交互复杂的SVG图形，因此SVG排版需要通过背景图片的形式来展示内容。接下来来了解如何在SVG元素上显示背景图片。

样式背景属性

在SVG元素上显示的背景可以分为两种，一种是背景颜色，使用background-color属性实现，一种是背景图片，使用b

了解本专栏 订阅专栏 解锁全文 超级会员免费看
懂点君
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
SVG入门-填充和边框
natsu-cc的博客
03-22 2143
前言 当我们绘制好了形状之后，是不会在SVG上显示出来（当然浏览器会给形状定义默认的填充色）。需要学习如何给形状添加颜色。可以使用几种方法来着色，包括指定对象的属性，使用内联CSS样式，或者内嵌的CSS样式，或者使用外部的CSS样式文件。大多数的web网站的SVG使用的是内联样式CSS，对于这些方法都有优缺点。 Fill 和 Stroke 属性 要使得形状显示出来，可以用两个属性来解决，一个是fill属性，一个是stroke属性，fill是填充，stroke是描边。 <rect x="10" y="
3D旋转词云
qq_44844370的博客
04-14 1403
3D旋转词云（vue） <template> <div> <svg style="background-color: black" :width="width" :height="height"> <a class="fontA" v-for="(tag, index) in tags" :key="`tag-${index}`"> <text :id="tag.id" :x
svg用作背景图
u011927449的博客
11-05 8566
svg用做背景图的几种方式 1. 直接使用 background: url('data:image/svg+xml;charset=utf-8,<svg width="10" height="10" ...
使用 CSS MARK 改变 SVG 背景色
weixin_34406086的博客
11-27 1008
CSS masks -webkit-mask 这个属性是相当强大的，详细的介绍请到这里查看，它非常值得深入研究. -webkit-mask 让为一个元素添加蒙板成为可能，从而你可以创建任意形状的花样。蒙板可以是 CSS3 渐变或者半透明的 PNG 图片。蒙板元素的 alpha 值为0的时候会覆盖下面的元素，为1的时候会完全显示下面的内容。相关的属性有 -webkit-mask-clip 、 ...
如何在 CSS 背景图片中对 SVG 图片进行着色 ，修改svg图片颜色
热门推荐
PromiseCao的博客
10-22 2万+
在CSS背景图片中使用SVG的优点 在CSS背景图片中使用SVG，可以使用css background属性的诸多特性，比如图片尺寸和图片位置等等。可以非常轻松的根据设备的尺寸来控制图片的尺寸，还有一个好处就是可以不用把SVG图片插入到html中，从而保持html的整洁。 在CSS背景图片中使用SVG，有很多的优点，对提高性能也是有很大帮助的。那在CSS背景图片中使用SVG，有什么方法来改变它...
SVG.<text/>选中时显示的背景
weixin_30599769的博客
01-15 370
1、我在 DTS里面的做法：css里面使用如下： text { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select:...
【react+ts】找不到less类型,Cannot find module ‘./xxx.module.less‘ or its corresponding type declarations
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
01-26 4968
问题描述 Cannot find module ‘./index.module.less’ or its corresponding type declarations 找不到less后缀名的类型 解决办法 在src目录下创建类型声明文件react-app-env.d.ts，并且声明less类型 内容如下 declare module '*.module.less' { const classes: { readonly [key: string]: string }; export de
兼容问题｜SVG排版『安卓无法显示大尺寸背景图片』解决方法
11-24
安卓无法显示大尺寸背景图片解决方法
SVG排版-点击翻页与开门
09-10
SVG排版-点击翻页与开门
SVG公众号排版点击播放音乐与淡入显示模板代码
03-26
1、SVG点击播放音乐与淡入显示模板代码 2、一键套用即可完成公众号黑科技排版
SVG排版公众号文章『播放GIF与二次展开无缝长图』模板代码
10-27
SVG排版公众号文章『播放GIF与二次展开无缝长图』模板代码
SVG黑科技排版｜双层上下自动对齐滑动，点击图片原生弹出
06-24
主要用于公众号SVG黑科技排版
svg大屏背景效果
最新发布
LYP_0320的博客
11-13 164
【代码】svg大屏背景效果。
vue使用 svg图片以及修改svg图片颜色
Lora_0925的博客
08-06 8679
一、如何使用svg 二、修改svg图片颜色。
SVG网页波浪动画效果背景
2301_76965813的博客
03-21 739
给大家分享一个SVG网页波浪动画效果背景。
使用svg并改变其颜色
qq_39441438的博客
05-12 2万+
svg直接作用在页面上 重点：设置svg的path属性 <html> <head> <style> body { background-color: #e2e2e2; } .svg-img { width: 100px; height: 100px; } svg path:hover { fill: skyblue; } /* ho
css修改svg图形背景色_使用CSS样式化可缩放矢量图形（SVG）
cune1359的博客
07-03 4384
今天，我们将继续有关可伸缩矢量图形（SVG）的讨论，正如我们在前一篇文章中指出的那样，使用SVG的优点之一是可以使用CSS对其进行样式设置。 SVG样式属性 SVG的样式基本上与常规HTML元素的工作方式相同，实际上它们也共享一些公共属性。 但是，还有其他一些专门用于SVG对象的属性，除了CSS之外，它们还有自己的规范。 例如 ，在常规HTML元素中，我们可以使用backgroun...
Svg 详解（一）背景
青岑的博客
04-02 3377
图片数字化背景 将图片存储为数据有两种方案。 其一为位图，也被称为光栅图。即是以自然的光学的眼光将图片看成在平面上密集排布的点的集合。每个点发出的光有独立的频率和强度，反映在视觉上，就是颜色和亮度。这些信息有不同的编码方案，在互联网上最常见的就是 RGB 。根据需要，编码后的信息可以有不同的位( bit )数——位深。位数越高，颜色越清晰，对比度越高；占用的空间也越大。另一项决定位图的精细度的...
在vue中，如何使用svg格式的图片作为背景。
W78955的博客
10-12 2001
在vue中，如何使用svg格式的图片作为背景。
详解SVG alignment-baseline属性
07-09
SVG的alignment-baseline属性用于定位SVG元素内部的文本或图形元素的垂直对齐方式。它定义了基线（baseline）相对于元素的垂直位置。 alignment-baseline属性可以应用于所有可定位的SVG元素，包括文本元素（<text>、<tspan>等）和图形元素（<rect>、<circle>等）。 alignment-baseline属性有以下几个可选值： 1. auto：表示使用默认的对齐方式。对于文本元素，默认值是baseline，对于图形元素，默认值是中心对齐。 2. baseline：将元素的基线与父元素的基线对齐。这是默认对齐方式，使得文本元素的基线沿着父元素的底部对齐。 3. before-edge：将元素的顶部与父元素的前沿对齐。前沿是指基线之上的最高点。 4. text-before-edge：将元素的顶部与父元素的文本前沿对齐。文本前沿是指文本行之上的最高点。 5. middle：将元素的中心与父元素的中心对齐。 6. central：将元素的中心与父元素的中心对齐。与middle相同，只是为了保持与CSS的一致性。 7. after-edge：将元素的底部与父元素的后沿对齐。后沿是指基线之下的最低点。 8. text-after-edge：将元素的底部与父元素的文本后沿对齐。文本后沿是指文本行之下的最低点。 9. ideographic：与baseline对齐，但基线的位置略有不同。在某些字体中，ideographic与baseline对齐可以更好地呈现东亚文字。 10. alphabetic：与baseline对齐，但基线的位置略有不同。在某些字体中，alphabetic与baseline对齐可以更好地呈现拉丁文字。 这些值可以通过CSS样式或直接在SVG元素的属性中指定。通过调整alignment-baseline属性的值，可以精确控制SVG元素内部文本或图形元素的垂直对齐方式，以满足具体的设计需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

懂点君

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值