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

最新推荐文章于 2022-07-15 15:50:36 发布
VIP文章 最新推荐文章于 2022-07-15 15:50:36 发布
阅读量2.2k 收藏 1
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/waiting7436/article/details/40744419
版权 
<!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.oncli
最低0.47元/天 解锁文章
wxyoo1
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
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 .
Study JavaScript《JS操作SVG的一些知识》
傻大专栏
11-25 9511
前阵子学习了一下SVG(Scalable Vector Graphics)，希望能借此弥补自己在图形艺术上的不足，当然最后也没有得到什么提高，不过也扩充了一些网页前段技术知识。通过做了一些小的设计项目，也发现SVG可以弥补一些HTML元素的不足，比如倾斜、弧线、动画、复用等等。 虽然SVG和HTML一样都属于XML的一种方言，一些基本的JavaScript对HTML的DOM操作都适用于SVG，但
js操作svg
wh359126613的专栏
01-13 1325
1，功能 鼠标位置放大缩小、支持拖动。 通过java后台服务返回的url，然后加载到浏览器中。(谷歌)
chrome 中调用 getSVGDocument() 方法返回null 解决办法
山峰在前方
08-02 1万+
方法 ：chrome 中使用javascript代码调用 getSVGDocument() 方法返回null 解决办法 1.不能使用文件系统方式打开html文件，应该通过服务器打开 使用http协议 2. 代码这么写  :      svgDoc = document.getElementById("gird").getSVGDocument();        if (svgDoc ==
javascript获取iframe、object、embed标签中引入SVG对象元素
u013400314的博客
07-15 1181
代码】javascript获取iframe、object、embed标签中引入SVG对象元素。
SVG对象：延迟获取
超频化石鱼的博客
02-09 866
引入一个SVG文件：&lt;embed id="mySVG" src="map.svg" type="image/svg+xml" /&gt;这样就能在浏览器中看到SVG的图。然而 ，要想在js中直接获取到SVG的对象：svgDoc = document.getElementById("mySVG").getSVGDocument();却会提示svgDoc为null。即使将该行代码放在ready函...
JAVA上百实例源码以及开源项目源代码
09-17
在有状态SessionBean中，用累加器，以对话状态存储起来，创建EJB对象，并将当前的计数器初始化，调用每一个EJB对象的count()方法，保证Bean正常被激活和钝化，EJB对象是用完毕，从内存中清除…… Java Socket 聊天...
JavaScript高级教程
09-10
第 1 章 JavaScript 是什么...............................................1 3 1.1 历史简述..............................................1 1.2 JavaScript 实现................................................
JAVA上百实例源码以及开源项目
01-03
在有状态SessionBean中，用累加器，以对话状态存储起来，创建EJB对象，并将当前的计数器初始化，调用每一个EJB对象的count()方法，保证Bean正常被激活和钝化，EJB对象是用完毕，从内存中清除…… Java Socket 聊天...
SVG 动态添加元素与事件
weixin_33948416的博客
01-02 1407
SVG文件是由各个元素组成。元素由标签定义，而标签格式即html的元素定义格式。但是载入一个SVG文件，却无法通过常规的js获取对象方式来获取到SVG中定义的元素，更无法通过这种方式来动态添加SVG元素与事件。 SVG元素的操作都要借助于SVG的document对象。SVG的document对象获取方式为： SVG 快速入门 svgDoc = document.getElementById("...
D3js-SVG简单初步
六月心悸
06-09 5420
D3最擅长于生成和操纵SVG图像来进行可视化。绘制div或其它原生HTML元素也是可以的，但是考虑到不同浏览器之间总会存在一些标准上的差异，使用SVG会更可靠更稳定，也会更快一些。 类似于Illustrator的矢量绘图软件可以生成SVG文件，但是我们这里讨论的是如何用代码来生成。 SVG元素 可扩展矢量图形(Scalable Vector Graphics, SVG)是一种基于
SVG与html的交互(svg的js与html的js互调用)
点点滴滴，终汇一海！
11-30 5568
SVG与html的交互(svg的js与html的js互调用) 这个例子显示了，在html中单击命令按钮设定svg中的矩形的填充颜色，并且调用svg的js函数FunCallByHtmlJs，产生个消息框。 在svg中，单击矩形时，设置html中的text的文本内容，并且调用html的js函数FunCallBySvgJs，产生个消息框。 svg文档以嵌入在html文档中运行。 例子在IE
js操作svg整体缩放
Chouglas的专栏
03-11 5317
首先我们先创建一个svg整体布局，代码如下：<!DOCTYPE html> <html> <head> <title>js操作svg实现整体缩放</title> <meta charset="utf-8"> </head> <body> <svg id="svg" style="background:#FAFAFA;"> <g id="svgPanel">
获取svg和svg内容的方法
热门推荐
为你，，千千万万遍。。。
12-05 1万+
方法一：使用正则表达式         1）先找到div中包含的所有内容         2）然后用正则表达式匹配svg开头，svg结束的标签            var data=window.$(".layout-canvas").html();            var content=window.$("svg").html();            var
vite-plugin-svg-icons中某些svg图标无法使用
最新发布
07-13
对于vite-plugin-svg-icons中无法使用的某些SVG图标，可能有几种可能的原因。以下是一些常见的解决方法： 1. 确保你已经正确安装和配置了vite-plugin-svg-icons插件。请确保在你的Vite项目中正确引入了该插件，并...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值