SVG 的 foreignObject 标签

最新推荐文章于 2023-11-29 10:38:11 发布
最新推荐文章于 2023-11-29 10:38:11 发布
阅读量6.4k 收藏 2
点赞数
文章标签： svg
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32615575/article/details/118384824
版权

正常的svg标签一般不支持css属性，和内嵌html元素，

但是svg的标签foreignObject却可以内嵌html和支持css样式 

允许的内容物里面可以内嵌任何元素html或字符数据
浏览器兼容性不支持所有的IE浏览器
属性height(高度)、width、x(元素x坐标)、y
css样式属性支持
TianNicholas
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SVG <foreignObject>简介与截图等应用 （转载）
weixin_30847939的博客
09-10 1256
一、从SVG文本换行说起 SVG和CSS几乎可以看成是同一个年代出来的东西，但是在Web界面展示这块，CSS长期统领江山，SVG偃旗息鼓，直到这些年，SVG开始乘势而上。 时势造英雄。当年web网页都是以图文展示为主，所以门户，博客这些网站兴起。而SVG擅长的是图形展示，对于文本呈现，只能嘿嘿一下，跟CSS相比那可就弱了几条街。举个最简单的效果，文本换行。在CSS下，当我们一段文字很长的时候，...
svg.foreignobject.js:SVG外对象对svg.js库的支持
05-18
svg.foreignobject.js 库的插件，用于在svg中创建异物元素。 有关更多详细信息，请参见。 Svg.foreignobject.js是根据MIT许可条款获得许可的。 用法 在html文档中包含svg.js库之后，请包含此插件。 添加异物 var canvas = SVG ( 'canvas' ) . size ( 1024 , 550 ) var fobj = canvas . foreignObject ( 100 , 100 ) . attr ( { id : 'fobj' } ) 添加儿童笔记 var txt = "some text that is quite long. and it goes on and on. and it's pointless really. and the grammar is terrible. blah. b
svg使用＜foreignObject＞标签插入html内容显示不完整
m0_37455857的博客
03-14 1006
bug：多个<foreignObject>标签包含多个body，两个并排的body各包含一个table 最后一个table里追加内容不完整。保证一个html文件里只有一个body试试，解决了，估计是xml格式浏览器解析的时候的问题！解决办法：把body改成div，可以保留一个。
SVG与foreignObject元素
WindrunnerMax
08-11 885
可缩放矢量图形基于标记语言，用于描述二维的矢量图形。作为一个基于文本的开放网络标准，能够优雅而简洁地渲染不同大小的图形，并和、、等其他网络标准无缝衔接。图像及其相关行为被定义于文本文件之中，这意味着可以对其进行搜索、索引、编写脚本以及压缩，此外这也意味着可以使用任何文本编辑器和绘图软件来创建和编辑。是可缩放矢量图形的缩写，其是一种用于描述二维矢量图形的可扩展标记语言标准，与基于像素的图像格式(如和)不同，使用数学方程和几何描述来定义图像，这使得其能够无损地缩放和调整大小，而不会失真或模糊。图像由基本形状(如
用CSS + SVG foreignObject实现动画组件
最新发布
QD_ANJING的博客
11-29 1177
这样的属性，这就是命名空间（namespace）。如果不给svg标签添加命名空间，那么浏览器会当作文本来识别收到一个需求，要求做出如上图一样的文字摇曳的SVG，我的脑子里闪过svg、path、group、text……等等SVG的标签，这太让人崩溃了。SVG多麻烦，难道不能用div+css动画来做吗？SVG有没有兼容前端开发习惯的写法呢？诶，还真有，SVG的 <foreignObject>元素就支持在里面写HTML和CSS。
svg-foreignobject-screenshot:使用SVG外来对象进行实验以呈现和生成HTML内容的图像
05-25
svg-foreignobject-截屏使用SVG 元素进行实验，以呈现和生成HTML内容的图像。 博客文章中的详细信息@
APPlogo.svg
12-12
SVG 画斜标签 图标，方便修改成不同的图标，使用记事本打开编辑文字就能实现简单logo，在浏览下可以直接浏览查看
.net 将SVG标签代码转成图片格式
06-05
.net 将SVG标签代码转成图片格式, vs2012，.net 可直接运行 内含Svg.DLL
HTML5 SVG表单浮动标签特效特效代码
03-20
HTML5 SVG表单浮动标签特效是一款效果非常炫酷的HTML5 SVG和CSS3表单浮动标签特效。
d3.js中使用foreignObject
X01动力装甲的专栏
09-29 2288
d3.js中使用foreignObject 使用svg的时候只能使用text，而且该text和html中的有差异，没有移除隐藏的属性。还好svg有个foreignObject，可以支持html的标签。 下面是通过d3.js中添加一个div标签。需要注意的是'xhtml:div'，需要一个xhtml作为前缀。 const fogt = g.append('foreignObject') ...
解决Safari浏览器使用SVG foreignObject 不生效,错位的问题
ZHZS123的博客
02-16 916
foreignObject 在safari下渲染,有可能会遇到以下问题: 节点内的元素被渲染到父 SVG 的坐标 0,0（左上角）,这是由于 Safari 中的一个错误，该错误会影响 foreignObject 根据顶部 SVG 而不是外部对象本身来计算渲染位置。某些样式会导致这个问题:
向强大的SVG迈进
凹凸实验室
06-23 1085
作者：凹凸曼 - 暖暖 SVG 即 Scalable Vector Graphics 可缩放矢量图形，使用XML格式定义图形。 一、SVG印象 SVG 的应用十分广泛，得益于 SVG 强大的各种特性。 1.1、 矢量 可利用 SVG 矢量的特点，描出深圳地铁的轮廓： 1.2、iconfont SVG 可依据一定的规则，转成 iconfont 使用： 1.3、 foreignObject 利用 SVG 的 foreignObject 标签实现截图功能，原理：foreignObject 内部嵌入 H
svg基础标签以及用法
L824627453的博客
10-15 7017
circle 圆 fill 填充 值:颜色 cx 中心x轴, cy 中心Y轴, r 圆半径 stoke 描边 值:颜色 stroke-width 描边宽度 值:数字 stroke 描边 值:颜色 rect 矩形 height 高 值:数字 width 宽 值:数字 fill 填充 值:颜色 stroke 描边 值:颜色 stroke-width 描边 宽度 值:颜色 x,y 矩形左上角的X轴Y轴位置 值:数字 rx,ry 矩形X轴与Y轴的圆角 值:数字，当只有一个值时，X轴Y轴圆角一致。 x1,y1 起点位
一些SVG 图片向下兼容优雅降级技术
weixin_30721077的博客
05-18 225
转自：http://www.zhangxinxu.com/wordpress/?p=3678 一、SVG前言 再一次拿可缩放矢量图形SVG(Scalable Vector Graphics)说事，对SVG有所关注的同行应该都知道，IE8-以及Android 2.3默认浏览器是不支持SVG的，实际项目，这些浏览器，至少IE8浏览器还没有到不管不问的时候，因此，在使用视网膜显示友好...
2.网页中使用SVG
五石之瓠 以为大樽 浮于江湖 悠笑人生
10-11 2365
Chapter2. Using SVG in Web Pages 约翰多恩说过，没有人是一座孤岛。同样，SVG 也不是孤立存在的。您可以查看 SVG 图像本身，作为一个独立的文件在您的 web 浏览器或 SVG 查看器中查看。本书中的许多例子都是以这种方式进行的。但是在其他例子中，你将想让你的图像集成到一个大的文档中，而这个文档包含了文本段落，表格，或者其他不能够单独通过使用 SVG 展示的内容。这章``描述了各种方法，用于将 SVG 集成到 HTML 或者其他类型的文档中。 图2-1 显示了上一章节绘制出
SVG 兼容以及开发中碰到的坑
Finally_yang的博客
04-27 3842
Android 5.0发布的时候，Google提供了Vector的支持。Vector Drawable相对于普通的Drawable来说，有以下几个好处：  -Vector图像可以自动进行适配，不需要通过分辨率来设置不同的图片  -Vector图像可以大幅减少图像的体积，同样一张图，用Vector来实现，可能只有PNG的几十分之一  -使用简单，很多设计工具，都可以直接导出SVG图像，从而转换
使用d3创建搭配foreignObject实现svg文本换行，出现文字不显示的问题
weixin_43170484的博客
06-06 2385
.append('xhtml:p') 对于非svg标签，需要添加xhtml:来标识，否则不能显示内容
如何用repeater控制页面翻页_如何用SVG foreignObject实现页面截图
weixin_39678426的博客
12-01 161
前段时间刚好有截取DOM为图片的需求，一开始用的html2canvas，但因为html2canvas太过重量级且有许多缺陷，于是我弃用了它。我花了一些时间自己写了一个npm包：https://www.npmjs.com/package/dom-painter​www.npmjs.com下面我来说说怎么自己用SVG foreignObject实现dom截图功能。假如我需要为一个dom节点截图：con...
html2canvas实现原理,html2canvas原理
weixin_34651547的博客
05-31 1572
html2canvas有2种模式，一种是利用foreignObject，一种是纯canvas绘制1.foreignObject到canvas步骤：1.把要截图的dom克隆一份，过程中把getComputedStyle附上style2.放到svg的foreignObject中3.把svg序列化成img的src(SVG直接内联)：img.src = "data:image/svg+xml;charse...
svg g标签的作用
06-02
SVG（Scalable Vector Graphics）中的 `<g>` 标签用于将多个形状组合在一起，形成一个组。它可以用来实现对组中所有形状的组合变换，如平移、旋转、缩放等。 `<g>` 标签可以嵌套在其他 `<g>` 标签中，形成多层嵌套的组。这种组合方式可以让图形结构更加清晰，方便进行操作。同时，`<g>` 标签也可以通过 CSS 样式来控制组内元素的样式。 例如，下面的代码中，将两个形状通过 `<g>` 标签组合在一起，然后对组进行旋转和缩放变换。 ```html <svg> <g transform="rotate(45) scale(0.5)"> <rect x="50" y="50" width="50" height="50" fill="red" /> <circle cx="75" cy="75" r="20" fill="blue" /> </g> </svg> ``` 这样就可以将 `<rect>` 和 `<circle>` 组合在一起，并对整个组进行变换，而不是单独对每个形状进行变换。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值