每天一个JavaScript实例-从js脚本中访问object元素中的SVG

最新推荐文章于 2023-10-27 14:37:31 发布
最新推荐文章于 2023-10-27 14:37:31 发布
阅读量2.3k 收藏 1
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/waiting7436/article/details/40744419
版权
这篇博客展示了如何在JavaScript中通过`object`元素访问并操作内部的SVG内容。通过获取SVG文档并监听加载事件，当点击SVG中的方形元素时，会改变其宽度、填充颜色和描边颜色，实现动态交互效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>每天一个JavaScript实例-从js脚本中访问object元素中的SVG</title>
<style>
	
</style>



</head>

<body>

<object id="object" data = "每天一个JavaScript实例-SVG中的javaScript展示.svg" style="padding:20px;width:600px;height:600px;">
	<p>No SVG support</p>
</object>
<script type="text/javascript">
var object = document.getElementById("object");
object.onload = function(){
	var svgdoc;

	try {
		svgdoc = object.contentDocument;
	}catch(e){
		try{
			svgdoc = object.getSVGDocument();
		}catch(e){
			alert("SVG in object not support in your environment");
		}
	}
	if(!svgdoc) return;
	var r = svgdoc.rootElement;

	var square = svgdoc.getElementById("square");

	square.onclick = function(){
		var width = parseFloat(square.getAttributeNS(null,"width"));
		width -= 50;
		square.setAttributeNS(null,"width",width);
		var color = square.getAttributeNS(null,"fill");
		if(color == "bule"){
			square.setAttributeNS(null,"fill","yellow");
			square.setAttributeNS(null,"stroke","green");
		}else{
			square.setAttributeNS(null,"fill","bule");
			square.setAttributeNS(null,"stroke","red");

		}
	}
}
</script>
</body>
</html>

get-svg-colors:从SVG文件中提取笔触和填充颜色
05-06
获取svg颜色 从SVG文件中提取笔触和填充颜色。 设计用于节点，而不是浏览器。 安装 npm install get-svg-colors --save 用法 const getColors = require ( "get-svg-colors" ) // Give it an SVG filename const colors = getColors ( __dirname + '/australia.svg' ) // Or an SVG string const colors = getColors ( '<svg...>' ) // You'll get back an object with two keys: `fills` and `strokes` // `fills` is an array of chroma-js objects colors . fills .
object 加载svg文件，通过js修改属性
weixin_42390878的博客
12-20 4189
js: var sObject = document.getElementById("svgObject"); sObject.addEventListener("load",function() { var svgg = sObject.getSVGDocument(); var svgDoc = sObject.contentDocument; ...
vue中，js获取svg内容并填充到svg图中
最新发布
weixin_42812634的博客
10-27 1692
vue中，js获取svg内容并填充到svg图中
Study JavaScript《JS操作SVG的一些知识》
傻大专栏
11-25 9645
前阵子学习了一下SVG(Scalable Vector Graphics)，希望能借此弥补自己在图形艺术上的不足，当然最后也没有得到什么提高，不过也扩充了一些网页前段技术知识。通过做了一些小的设计项目，也发现SVG可以弥补一些HTML元素的不足，比如倾斜、弧线、动画、复用等等。 虽然SVG和HTML一样都属于XML的一种方言，一些基本的JavaScript对HTML的DOM操作都适用于SVG，但
js操作svg
wh359126613的专栏
01-13 1412
1，功能 鼠标位置放大缩小、支持拖动。 通过java后台服务返回的url，然后加载到浏览器中。(谷歌)
orange-svg: 一个简化SVG集成至前端项目的JavaScript库
svg:用于将SVG生成为DOM元素或字符串的库”，这意味着“orange-svg”是一个JavaScript库，它能够将SVG（Scalable Vector Graphics，可缩放矢量图形）内容转换成DOM（Document Object Model，文档对象模型）元素或者...
SVG动态操作实例：JavaScript与HTML结合应用
- `showbigsvg.js` 可能是一个JavaScript文件，用来控制或展示`bigimg.html`中的大型SVG图形。 - `showsvg.js` 同样可能是用于控制SVG元素的JavaScript文件，但作用于不同的图形或功能。 - `littleimg.svg` 应该是一...
SVG与html的交互(svg的js与html的js互调用)
10-08
- **调用SVG内部的JavaScript**：HTML中的JavaScript可以调用SVG内部的脚本，通过`document.getElementById('svgElementId').contentWindow`获取SVG的window对象，然后访问其内部函数。 - **使用data-*属性**：...
JavaScript动画条形图库-bars.svg.js使用指南
3. JavaScript DOM操作：文档对象模型（Document Object Model，DOM）是一个与平台和语言无关的接口，允许程序和脚本动态地访问和更新文档的内容、结构和样式。JavaScript通过DOM操作提供了对HTML文档进行动态访问的...
SVG动画vivus.js库使用小结(实例代码)
10-19
Vivus.js是一个轻量级的JavaScript库，专门用于创建SVG矢量图形的动画效果。SVG（Scalable Vector Graphics）是一种基于XML的图形格式，它允许开发者在网页上创建可缩放、清晰且交互式的图形。Vivus.js通过控制SVG...
chrome 中调用 getSVGDocument() 方法返回null 解决办法
热门推荐
山峰在前方
08-02 1万+
方法 ：chrome 中使用javascript代码调用 getSVGDocument() 方法返回null 解决办法 1.不能使用文件系统方式打开html文件，应该通过服务器打开 使用http协议 2. 代码这么写  :      svgDoc = document.getElementById("gird").getSVGDocument();        if (svgDoc ==
HTML5之SVG详解（一）：基本概括
每一次对问题的深究，总会收获新的知识和体会
01-10 1379
转载自：http://www.cnblogs.com/hupeng/archive/2012/12/21/2828456.html 1、背景 SVG是Scalable Vector Graphics的缩写，意为可缩放矢量图形。1998年，万维网联盟成立了一个工作组，研发一种通过XML来表现矢量图形的技术——SVG！由于SVG也是一种XML文件，所以SVG也继承了XML的开放
javascript获取iframe、object、embed标签中引入SVG对象元素
u013400314的博客
07-15 1342
代码】javascript获取iframe、object、embed标签中引入SVG对象元素。
<object>元素+svg 绘制图片
weixin_30463341的博客
06-01 358
结果图： 将以下代码保存至sample.svg文件中： <!-- SVG图形一开始生命命名空间 --> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"> <!-- 图形的坐标系 --> <defs> <!-- 设置后面要用到的一些定义 --...
js操作svg整体缩放
Chouglas的专栏
03-11 5457
首先我们先创建一个svg整体布局，代码如下：<!DOCTYPE html> <html> <head> <title>js操作svg实现整体缩放</title> <meta charset="utf-8"> </head> <body> <svg id="svg" style="background:#FAFAFA;"> <g id="svgPanel">
js - 动态更改SVG颜色
weixin_44404237的博客
01-12 9131
动态更改SVG颜色 今天设计问我一个问题，用户自定义颜色，根据不同的自定义颜色更改项目中的icon色系，是否能做到 - 能！ svg 代码的格式是这样的 <?xml version="1.0" encoding="UTF-8"?> <svg width="99px" height="88px" viewBox="0 0 99 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.or
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值