svg & stroke & style & class
svg & stroke & style & class
svg selected style
methods
style
class, !important
fill, stroke, stroke-width, fill-opacity: 0.5;
outline, box-shadow
clickSelected(className = `selected-svg`) {
// update select element
const color = this.reverseColor();
this.poly.setAttribute("fill", color);
// this.poly.setAttribute("fill", "#67c23a");
const cssClass = this.poly.getAttribute("class");
// this.poly.setAttribute("class", "selected-svg");
this.poly.setAttribute("class", `${cssClass} ${className}`);
const style = "fill:lime; fill-opacity: 0.5; stroke:purple; stroke-width:10;";
this.poly.setAttribute("style", style);
}
reverseColor() {
const color = this.poly.getAttribute("fill");
return `#` + color.slice(1).split("").reverse().join("");
}
demo polygon
https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_polygon
<!DOCTYPE html>
<html>
<body>
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210" style="fill:lime; stroke:purple; stroke-width:5" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
style="fill:lime; stroke:purple; stroke-width:5"
style
stroke-width, stroke
<polygon fill="#cccccc" fill-opacity="1" points="249.5 0.5 674.5 0.5 674.5 136.5 249.5 136.5" class="feature selected-class" stroke="#00ff00" style="fill:lime; stroke:purple; stroke-width:5"></polygon>
css class
stroke-width, stroke
.selected-class {
fill: #ccc !important;
stroke-width: 10px !important;
stroke: #0f0 !important;
}
size not change
poly = document.querySelector(`polygon`);
// <polygon fill="#cccccc" fill-opacity="1" points="249.5 0.5 674.5 0.5 674.5 136.5 249.5 136.5" class="feature selected-class" stroke="#00ff00" style="fill:lime; stroke:purple; stroke-width:5"></polygon>
poly.getBBox();
// SVGRect {x: 249.5, y: 0.5, width: 425, height: 136}
poly.getBoundingClientRect();
// DOMRect {x: 174.64999389648438, y: 190.35000610351562, width: 297.5, height: 95.19998168945312, top: 190.35000610351562, …}
poly = document.querySelector(`polygon`);
// <polygon fill="#cccccc" fill-opacity="1" points="249.5 0.5 674.5 0.5 674.5 136.5 249.5 136.5" class="feature selected-class" stroke="#00ff00"></polygon>
poly.getBBox();
// SVGRect {x: 249.5, y: 0.5, width: 425, height: 136}
poly.getBoundingClientRect();
// DOMRect {x: 174.64999389648438, y: 190.35000610351562, width: 297.5, height: 95.19998168945312, top: 190.35000610351562, …}
svg & stroke & style & class的更多相关文章
- 学习SVG系列(3):SVG Stroke属性
SVG stroke 属性 1.stroke 2.stroke-width 3.stroke-linecap 4.stroke-dasharray 5.stroke-opacity 6.stroke- ...
- SVG Stroke属性
一.stroke属性介绍 SVG提供了一个范围广泛stroke属性,用于描述轮廓,其中包括 stroke 指定颜色 stroke-width 指定宽度 stroke-linecap 指定端点样式 st ...
- [翻译svg教程]svg中矩形元素 rect
svg 元素<rect> 是一个矩形元素,用这个元素,可以你可以绘制矩形,设置矩形宽高,边框的宽度颜色,矩形的填充颜色,是否用圆角等 rect 示例 <svg xmlns=" ...
- SVG的使用
一,svg可以在浏览器中直接打开 二,在html使用<img/>标签引用 三,直接在html中使用svg标签 四,作为css背景 SVG支持ie9+ ,chrome 33.0+,firef ...
- HTML5的 2D SVG和SVG DOM的学习笔记(1)
(项目中要使用SVG,只好补充知识了) HTML体系中,最常用的绘制矢量图的技术是SVG和HTML5新增加的canvas元素.这两种技术都支持绘制矢量图和光栅图. 一.SVG概述 可缩放矢量图形(Sc ...
- SVG 学习(一)
SVG 意为可缩放矢量图形(Scalable Vector Graphics). SVG 使用 XML 格式定义图像. 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Gr ...
- SVG的内部事件添加
SVG的内部事件添加: <%@ page language="java" contentType="text/html; charset=UTF-8" p ...
- SVG的text使用
SVG的text使用: 参考:http://www.docin.com/p-7393979.html <%@ page language="java" contentType ...
- SVG的path的使用
SVG的path的使用: 参考:http://justcoding.iteye.com/blog/2226354 <%@ page language="java" conte ...
随机推荐
- LOJ10065 北极通讯站
Waterloo University 2002 北极的某区域共有 n 座村庄,每座村庄的坐标用一对整数 (x,,y) 表示.为了加强联系,决定在村庄之间建立通讯网络.通讯工具可以是无线电收发机,也可 ...
- 反向传播(Back Propagation)
反向传播(Back Propagation) 通常在设计好一个神经网络后,参数的数量可能会达到百万级别.而我们利用梯度下降去跟新参数的过程如(1).但是在计算百万级别的参数时,需要一种有效计算梯度的方 ...
- Springboot 项目部署到服务器上
项目部署到服务器上,有两种方式,一种 jar 包,一种 war 包 jar包 部署时,后续的域名配置,SSL证书等在nginx中配置 war包 部署时,后续的域名配置可以在tomcat中配置就好,修改 ...
- Nginx上安装SSL证书
准备 参考 :链接 下载的Nginx证书压缩文件解压后包含: .pem:证书文件.PEM文件的扩展名为CRT格式. .key:证书密钥文件.申请证书时如果未选择自动创建CRS,则下载的证书文件压缩包中 ...
- MTO1804无刷电机引发的悲惨经历之二:电调固件刷新与优化
前言 原创文章,转载引用请务必注明链接,水平有限,如有疏漏,欢迎指正. 书接上回,我们总算是基本确认了黑衣神秘电调的身份,本文就尝试对电调固件进行一番设置,来个免费优化. 1.刷新固件 关于电调的固件 ...
- XCTF-你是谁
前期工作 查壳,无.运行 不知道有啥用,迷宫题? 逆向分析 文件结构 查看了一下主要逻辑在background中,因为MainActivity的setContentView是background.ba ...
- python flask_sqlalchemy 多态 polymorphic 实现单表继承
sqlalchemy 多态 polymorphic 实现单表继承 sqlaclchemy中的单表继续就是以一个模型类为基类,其他模型类继承基类,所有模型类的的数据都存一张表里面(也可以是多张,只不过基 ...
- VScode 连接虚拟机
VScode 连接虚拟机 在VScode上面使用SSH连接虚拟机,编写代码以及运行都将会方便许多 打开VScode,安装Remote-SSH插件 配置SSH连接信息 点击左侧第四个图标,然后单击设置按 ...
- Codeforces Round #651 (Div. 2) B. GCD Compression(数论)
题目链接:https://codeforces.com/contest/1370/problem/B 题意 给出 $2n$ 个数,选出 $2n - 2$ 个数,使得它们的 $gcd > 1$ . ...
- hdu 6806 Equal Sentences 找规律
题意: 给你一个有n个单词的单词串S,对这n个单词进行排列组合形成新的一个单词串T,如果在S中任意某个单词所在位置,和这个单词在T中所在位置之差的绝对值小于等于1,那么就说S和T串相等 让你求S一共有 ...