svg & stroke & style & class

svg selected style

methods

  1. style

  2. class, !important

  3. fill, stroke, stroke-width, fill-opacity: 0.5;

  4. 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的更多相关文章

  1. 学习SVG系列（3）：SVG Stroke属性

    SVG stroke 属性 1.stroke 2.stroke-width 3.stroke-linecap 4.stroke-dasharray 5.stroke-opacity 6.stroke- ...

  2. SVG Stroke属性

    一.stroke属性介绍 SVG提供了一个范围广泛stroke属性,用于描述轮廓,其中包括 stroke 指定颜色 stroke-width 指定宽度 stroke-linecap 指定端点样式 st ...

  3. [翻译svg教程]svg中矩形元素 rect

    svg 元素<rect> 是一个矩形元素,用这个元素,可以你可以绘制矩形,设置矩形宽高,边框的宽度颜色,矩形的填充颜色,是否用圆角等 rect 示例 <svg xmlns=" ...

  4. SVG的使用

    一,svg可以在浏览器中直接打开 二,在html使用<img/>标签引用 三,直接在html中使用svg标签 四,作为css背景 SVG支持ie9+ ,chrome 33.0+,firef ...

  5. HTML5的 2D SVG和SVG DOM的学习笔记（1）

    (项目中要使用SVG,只好补充知识了) HTML体系中,最常用的绘制矢量图的技术是SVG和HTML5新增加的canvas元素.这两种技术都支持绘制矢量图和光栅图. 一.SVG概述 可缩放矢量图形(Sc ...

  6. SVG 学习（一）

    SVG 意为可缩放矢量图形(Scalable Vector Graphics). SVG 使用 XML 格式定义图像. 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Gr ...

  7. SVG的内部事件添加

    SVG的内部事件添加: <%@ page language="java" contentType="text/html; charset=UTF-8" p ...

  8. SVG的text使用

    SVG的text使用: 参考:http://www.docin.com/p-7393979.html <%@ page language="java" contentType ...

  9. SVG的path的使用

    SVG的path的使用: 参考:http://justcoding.iteye.com/blog/2226354 <%@ page language="java" conte ...

随机推荐

  1. 学习SpringBoot，整合全网各种优秀资源，SpringBoot基础，中间件，优质项目，博客资源等，仅供个人学习SpringBoot使用

    学习SpringBoot,整合全网各种优秀资源,SpringBoot基础,中间件,优质项目,博客资源等,仅供个人学习SpringBoot使用 一.SpringBoot系列教程 二.SpringBoot ...

  2. Java——集合框架之Set&HashSet,HashMap,泛型，compareTo

    Set Set接口--数据存放无序,非常简单,主要呈现信息列表 Set接口存储一组唯一.无序的对象 HashSet是Set接口常用的实现类 Set接口不存在get方法 Iterator接口:表示对集合 ...

  3. Flink-v1.12官方网站翻译-P017-Execution Mode (Batch/Streaming)

    执行模式(批处理/流处理) DataStream API 支持不同的运行时执行模式,您可以根据用例的要求和作业的特点从中选择.DataStream API 有一种 "经典 "的执行 ...

  4. 提升NginxTLS/SSL HTTPS 性能的7条优化建议

    自2018年7月起,谷歌浏览器开始将" HTTP"网站标记为"不安全".在过去的几年中,互联网已经迅速过渡到HTTPS,Chrome浏览器的流量超过70%,并且 ...

  5. 一个ftp协议传输文件之后执行脚本无法工作的情况

    作者:良知犹存 转载授权以及围观:欢迎添加微信号:Conscience_Remains 总述         移植一个文件系统时候,我在window下git clone了对方仓库源码,然后用FileZ ...

  6. Luogu4168 蒲公英 （分块）

    题目传送门 题意 长度为n的序列,有m次询问,每次询问求\([l,r]\) 间的众数,如果有多个,输出最小的那个 \(n\le 4\times 10^4,m\le 5\times 10^5,a_i\l ...

  7. 【bzoj 2467】[中山市选2010]生成树（数论--排列组合）

    题目:有一种图形叫做五角形圈.一个五角形圈的中心有1个由n个顶点和n条边组成的圈.在中心的这个n边圈的每一条边同时也是某一个五角形的一条边,一共有n个不同的五角形.这些五角形只在五角形圈的中心的圈上有 ...

  8. AcWing 247. 亚特兰蒂斯 (线段树,扫描线,离散化)

    题意:给你\(n\)个矩形,求矩形并的面积. 题解:我们建立坐标轴,然后可以对矩形的横坐标进行排序,之后可以遍历这些横坐标,这个过程可以想像成是一条线从左往右扫过x坐标轴,假如这条线是第一次扫过矩形的 ...

  9. Codeforces Round #646 (Div. 2) C. Game On Leaves (贪心,博弈)

    题意:给你一棵树,每次可以去掉叶节点的一条边,Ayush先开始,每回合轮流来,问谁可以第一个把\(x\)点去掉. 题解:首先如果\(x\)的入度为\(1\),就可以直接拿掉,还需要特判一下入度为\(0 ...

  10. Cell 动态行高文字显示不全问题探索

    目录 问题概述 一.新建工程 二.尝试复现问题 尝试解决 修改contentLblBtmCon优先级为High(750) 修改contentLblBtmCon优先级为Low(250) 小结 其他解决思 ...