<object>元素+svg 绘制图片

最新推荐文章于 2023-02-20 23:44:57 发布
最新推荐文章于 2023-02-20 23:44:57 发布
阅读量286 收藏
点赞数
原文链接：http://www.cnblogs.com/ctsch/p/6930379.html
版权

结果图：

将以下代码保存至sample.svg文件中：

<!-- SVG图形一开始生命命名空间 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"> <!-- 图形的坐标系 -->
	<defs> 				<!-- 设置后面要用到的一些定义 -->
		<linearGradient id="fade"> 	<!-- 设置一种渐变色命名为“fade” -->
			<stop offset="0%" stop-color="#008"/> 	<!-- 深蓝 -->
			<stop offset="100%" stop-color="#ccf"/> <!-- 渐变到浅蓝 -->
		</linearGradient>
	<!-- 画一个具有宽的黑色边框并且渐变色为填充色的矩形 -->
	</defs>
	<rect x="100" y="200" width="800" height="600" stroke="black" stroke-width="25" fill="url(#fade)"/>
</svg>

　

　以下为html显示文件：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SVG矢量图</title>
</head>
<body>
<object data="./sample.svg" type="image/svg+xml" width="300px" height="300px" />
</body>
</html>

　　

转载于:https://www.cnblogs.com/ctsch/p/6930379.html

weixin_30463341
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
object 加载svg文件，通过js修改属性
weixin_42390878的博客
12-20 3997
js: var sObject = document.getElementById("svgObject"); sObject.addEventListener("load",function() { var svgg = sObject.getSVGDocument(); var svgDoc = sObject.contentDocument; ...
三种方式：object、embed、mask引用 Svg 并更改样式
White feathe 的博客
04-20 2628
方式1：使用Object、embed标签引入 html <div class="item"> <object data="test.svg" type="image/svg+xml"></object> <embed src="test.svg" type="image/svg+xml" /> </div> 更改颜色，大小可通过css处理 .item { overflow: hidden; object,embed { c
(原)Html5之Svg对象的构造方法
rainsilence
07-27 317
S V G(可放缩的矢量图形)是W3C(World Wide Web ConSor—tium国际互联网标准组织)在2000年8月制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。   W3C是作为一个国际X的工业联盟而创建的， 目的是领导整个互联网协作的发展和创新， 以实现科技的进步和共同发展。由于W3C联盟关于SVG的开发工作组的成员都是一些知名厂商， 如Adobe、苹果、A...
svg的js库
追本溯源的专栏
05-21 3048
很久没有写博客了，贴上这个月前一段关于动态创建svg的js库吧。 /** SVGObject 库针对于SVG封装部分功能 为SVG脚本开发提供方便，后期会加入 于VML兼容的封装，实现IE下面可以正 常的执行 @author: 追本溯源 @time: 2015-5-5 */ SVGObject = {version: '1.1'} SVGObject.SVG_NS = 'http
将SVG文件嵌入到网页中的问题 并说object和embed标记
04-29 4805
将SVG文件嵌入到网页中，可以使用将其包含到网页的HTML中，例如下面的HTML文档： SVG Demonstration  SVG Demonstration   A page may have other code besides the SVG image.               width="300" height="200">  Using ob
SVG+DIV画审批流程图，生成JSON
05-04
本话题主要探讨如何使用SVG（Scalable Vector Graphics）和DIV元素在Vue框架下绘制审批流程图，并将其转换为JSON格式，便于进一步的开发和集成。 SVG是一种基于XML的矢量图像格式，它允许开发者创建可缩放、清晰且...
svg参考资料链接
04-17
4. **路径数据**：`<path>`元素是SVG中最强大的，通过`d`属性的一系列指令和坐标值来绘制复杂的形状。 5. **样式控制**：SVG图形可以使用内联样式、`style`元素或外部CSS文件进行样式化。CSS选择器能精准地定位SVG...
svg动态画图
06-18
5. **图片 `<image>`**：`<image>`元素可以插入图片，`xlink:href`用于指定图片URL，`x`, `y`, `width`, `height`则定义图片在SVG画布中的位置和尺寸。 将SVG引入HTML或JSP页面有多种方式： - **Object方式**：...
svg-basic
03-13
3. `object`标签：`<object data="path/to/svg-file.svg" type="image/svg+xml"></object>`。 4. `embed`标签：`<embed src="path/to/svg-file.svg" type="image/svg+xml">`。 七、SVG动画 SVG支持多种动画效果，如...
svg-html.zip
07-03
6. **路径数据**：SVG的`<path>`元素通过`d`属性的路径数据指令绘制复杂的形状，如曲线、弧线等。 7. **颜色和填充**：SVG支持填充色、描边色以及渐变填充，可以精确控制图形的外观。 学习和理解这些示例，有助于...
SVG 基础学习（一）
qq_43434300的博客
08-24 375
一.SVG简单介绍 SVG 意为可缩放矢量图形（Scalable Vector Graphics）。 SVG 使用 XML 格式定义图像。 SVG 是使用 XML 来描述二维图形和绘图程序的语言。 什么是SVG？ SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 是万维网联盟的标准 SVG 与诸如 DOM 和 XS
javascript获取iframe、object、embed标签中引入SVG对象元素
u013400314的博客
07-15 1229
代码】javascript获取iframe、object、embed标签中引入SVG对象元素。
html中插入svg
m0_61696809的博客
02-20 6896
html中插入svg的不同方法
SVG 在前端的7种使用方法，你还知道哪几种？
weixin_39415598的博客
07-08 9193
theme: smartblue 本文简介 点赞 + 关注 + 收藏 = 学会了 技术一直在演变，在网页中使用 SVG 的方法也层出不穷。每个时期都有对应的最优解。 所以我打算把我知道的 7种 SVG 的使用方法列举出来，有备无患~ 如果你还知道其他方法，可以在评论区补充~ 1. 在浏览器直接打开 ```svg 雷猴 ``` xml 是浏览器能读取的格式，...
svg嵌入到html中的几种方式
ailw92114的博客
05-14 1006
最简单的方式好像就是用img，自己暂时不知道这种方式有什么缺陷，欢迎广大网友指正： <img src="ask.svg"/>` 剩下几种方式主要是在各个博客网站之流学习的： 使用<embed> 标签 <embed> 标签被所有主流的浏览器支持，并允许使用脚本。 注释：当在 HTML 页面中嵌入 SVG 时使用 <em...
每天一个JavaScript实例-从js脚本中访问object元素中的SVG
wxyoo1 的技术人生
11-03 2266
每天一个JavaScript实例-从js脚本中访问object元素中的SVG No SVG support var object = document.getElementById("object"); object.onload = function(){ var svgdoc; try { svgdoc = object.contentDocument;
SVG 入门 及 嵌入HTML的7种方式
热门推荐
司马懿的西山居
11-25 3万+
SVG简介SVG 意为可缩放矢量图形（Scalable Vector Graphics）。 SVG 使用 XML 格式定义图像。SVG与其他图像格式相比，SVG的优势在于 SVG 可被非常多的工具读取和修改（比如记事本） SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。 SVG 是可伸缩的 SVG 图像可在任何的分辨率下被高质量地打印 SVG 可在图像质量不下降的情况下被放
iOS CAShaperLayer 层详解
jeffasd的专栏
03-07 1120
http://blog.chinaunix.net/uid-29345848-id-5671145.html nonzero字面意思是“非零”。按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点情况。从0开始计数，路径从左向右穿过射线则计数加1，从右向左穿过射线则计数减1。得出计数结果后，如果结果是0，则认为点在图形外部，否则认为在内部。下图
怎么在<div id = "chain-graph"> </div>里面找到<svg></svg>的内容
最新发布
05-26
可以使用JavaScript来获取`<div id="chain-graph">`元素中的`<svg>`元素内容。可以使用`document.getElementById()`方法获取到`<div>`元素，然后使用`innerHTML`属性获取`<div>`元素中的HTML内容，最后使用正则表达式匹配出`<svg>`元素的内容。 以下是一个示例代码： ```javascript // 获取<div>元素 var divElement = document.getElementById("chain-graph"); // 获取<div>元素中的HTML内容 var htmlContent = divElement.innerHTML; // 使用正则表达式匹配<svg>元素的内容 var regex = /<svg.*?>[\s\S]*?<\/svg>/i; var svgContent = htmlContent.match(regex)[0]; console.log(svgContent); // 输出<svg>元素的内容 ``` 需要注意的是，这种方式获取的`<svg>`元素内容是包括其父元素`<div>`在内的完整HTML代码。如果只需要获取`<svg>`元素的内容，可以通过修改正则表达式来实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值