SVG Dom绘制矩形

最新推荐文章于 2021-06-07 18:05:42 发布
最新推荐文章于 2021-06-07 18:05:42 发布
阅读量530 收藏
点赞数
分类专栏： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baohanqing/article/details/17688375
版权
SVG <wbr>Dom绘制矩形

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>使用svg dom的形式来创建svg</title>
    <style>
        #svg-samples{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
    <script>
        function createSVG(){
            var root=document.getElementByIdx_x("svg-samples");
            var SVG="http://www.w3.org/2000/svg";

            //创建svg元素
            var svg=document_createElement_xNS(SVG,"svg");
            svg.setAttribute("width","400");
            svg.setAttribute("height","200");

            //创建我们的rect元素
            var rect1=document_createElement_xNS(SVG,"rect");
            rect1.setAttribute("x",20);
            rect1.setAttribute("y",20);
            rect1.setAttribute("width","160");
            rect1.setAttribute("height","160");
            //指定涂抹的颜色
            rect1.setAttribute("fill","skyblue");


            //创建第二个rect元素
            var rect2=document_createElement_xNS(SVG,"rect");
            rect2.setAttribute("x","220");
            rect2.setAttribute("y","20");
            rect2.setAttribute("width","160");
            rect2.setAttribute("height","160");
            //指定圆角半径
            rect2.setAttribute("ry","40");
            //指定涂抹颜色
            rect2.setAttribute("fill","skyblue");


            svg.a(rect1);
            svg.a(rect2);


            root.a(svg);
        }

    </script>

</head>
<body οnlοad="createSVG();">
    <div id="svg-samples"></div>
</body>
</html>
战略观察者
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
09-28
由于SVG是html的元素，所以支持普通的DOM操作，又由于SVG本质上是xml文档，所以也有一种特殊的DOM操作，大多称之为SVG DOM,本文将详细介绍下SVG中的DOM操作，感兴趣的朋友可不要错过哦
dom-to-svg:用于将给定HTML DOM节点转换为可访问的SVG“屏幕截图”的库
03-16
DOM到SVG 用于将给定HTML DOM节点转换为可访问的SVG“屏幕截图”的库。 演示版 :camera_with_flash: 试用，该使用此库可让您获取任何网页的SVG屏幕截图。 您可以在找到源代码。 用法 import { documentToSVG , ...
svg&nbsp;dom绘制文本
12-30 498
dom绘制文本" TITLE="svg dom绘制文本" />   <!DOCTYPE html>     <meta charset="utf-8">     svg dom绘制文本             #text{             border: 1px solid red;             width: 200px;             height: 200
在HTML 5中使用Canvas和SVG来绘制矩形
weixin_52630329的博客
12-11 201
使用SVG绘制矩形的HTML 5代码。 使用画布绘制矩形的HTML 5代码。 var c=document.getElementById(“myCanvas”); var ctx=c.getContext(“2d”); ctx.rect(20,20,150,100); ctx.stroke(); var canvas = document.getElementById(‘myCanvas’); var context = canvas.getContext(‘2d’); var centerX =
html画矩形svg,JavaScript – 在SVG中动态绘制矩形
weixin_39789094的博客
06-07 325
您可以使用以下循环填写屏幕：var svgns = "http://www.w3.org/2000/svg";for (var x = 0; x < 5000; x += 50) {for (var y = 0; y < 3000; y += 50) {var rect = document.createElementNS(svgns, 'rect');rect.setAttribut...
在html5中如何把画正方形,如何在HTML 5中使用Canvas和SVG来绘制矩形？
weixin_33252145的博客
05-31 162
JAROfLOvEaaa使用SVG绘制矩形的HTML 5代码。使用画布绘制矩形的HTML 5代码。var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.rect(20,20,150,100);ctx.stroke();var canvas = document.getElementById('myCanva...
SVG绘制矩形简单示例分享
唐一峰
02-22 2279
最近我初学HTML5，刚在一步步学习SVG，积累了一些个人心得和程序代码，希望和大家分享，今天分享“svg之矩形”部分 1、简单矩形 效果图如下： 关键代码： 代码解析：rect 元素代表矩形；width 和 height 属性可定义矩形的高度和宽度；2、矩形填充颜色及边框效果图如下：关键代码：
orange-svg:用于将SVG生成为DOM元素或字符串的库
04-01
橙色用于将SVG生成为DOM元素或字符串的库。 该库的功能有限（主要是因为它是由另一个不使用所有SVG元素的库创建的），但是您可以在项目中对其进行扩展。 您可以通过命令npm run build来构建此库以供静态前端使用（您...
SVG绘制小熊
11-07
SVG绘制小熊涉及的知识点包括SVG的基本结构、元素、属性以及如何使用这些元素来构建复杂的图形。 1. SVG基本结构： SVG图像由一系列的图形元素组成，包括矩形、圆形、路径等。SVG文件通常以`<svg>`标签作为根元素，...
SVG制作圆角矩形代码
01-24
圆角矩形是SVG中的基本元素之一，它允许开发者创建具有平滑圆润边角的矩形，而不是传统矩形的直角。 SVG制作圆角矩形的代码通常涉及到`<rect>`标签，该标签用于定义一个矩形。圆角矩形可以通过设置`rx`和`ry`属性来...
html5 canvas元素各种矩形的绘制
蛮牛呆呆的博客
12-16 1950
canvas{background: #b8edc9;}                            Canvas                      您的浏览器不支持html5dcanvas元素                       var canvas=document.getElementById('mycanvas');//定义变量获取画布dom
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
TTO_OTT的专栏
03-17 1637
原文地址：http://www.jb51.net/html5/72250.html SVG提供了很多的基本形状，这些元素可以直接使用，这一点比canvas好多了，在这里就不多说了，感兴趣的朋友可以了解下，或许本文对你的了解SVG的图形绘制有所帮助 基本形状 SVG提供了很多的基本形状，这些元素可以直接使用，这一点比canvas好多了。废话不说了，直接看例子，这个最直接：
面对对象之绘制矩形
不会写代码的前端
11-10 292
绘制矩形：通过面向对象知识 &lt;body&gt; &lt;div id="main"&gt;&lt;/div&gt; &lt;script&gt; var j=new Rect({parentId:"main",position:"absolute",left:"100",top:"200",width:"200"
html画矩形svg,canvas画矩形和svg画矩形的两种方法代码
weixin_31455121的博客
06-07 210
本篇文章给大家带来的内容是关于canvas画矩形和svg画矩形的两种方法代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。1.canvas画矩形#huaban{border:1px solid;}var can=document.getElementById("huaban");//获得画板数据var con=can.getContext('2d');//获得笔刷con.fill...
SVG基础以及使用Javascript DOM操作SVG
热门推荐
多多
06-30 3万+
简介在HTML中使用SVG " style="">分组元素 解决text文本排版问题 通过Javascript DOM控制SVG 设置文本获取元素高宽和坐标事件处理自定义的z-index层级属性更多DOM API为什么不使用jQuery？ 简介 首先要明白SVG是基于XML格式定义图像的一种技术，并且是矢量的，也就是说在不同分辨率下都显示得很好。想到这里，有
jquery 创建 SVG DOM 的处理方法
孙健的专栏
10-22 9535
jquery 默认 创建dom元素  使用的是 createElement 方法 这个是无法生成SVG DOM的 可以使用下方的方法生成 var svgns = "http://www.w3.org/2000/svg"; $.svg = function $svg(tagName) { return $(document.createElementNS(svgns, tag
qt练习控件label控件-lineEdit控件样例代码
最新发布
07-30
qt练习控件label控件-lineEdit控件样例代码
svg语言绘制矩形
06-02
可以使用 SVG (Scalable Vector Graphics) 语言绘制矩形，具体代码如下： ``` <svg width="100" height="100"> ;stroke:purple;stroke-width:1"/> </svg> ``` 其中，`<rect>` 标签表示绘制矩形，`x` 和 `y` 属性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值