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. luoguP4999 烦人的数学作业

    写在前面 这两天信息量有点大,需要好好消化一下,呼呼 \(f[i][j]\) 的转移式还是好理解的,但是对于其实际意义课上有点糊 求 \(ans_{1, x}\) 是感觉手动把数拆开看会好理解一点?? ...

  2. 洛谷 P1401 城市

    写在前面 今天来水主题库里的有水分的紫题,随便一翻竟然找到宝了. 小清新二分 + 网络流. 算法思路 考虑到题目中限制的是最大边权,要求最大边权最小,那么很容易想到二分答案. 单调性的证明:最大边权是 ...

  3. Redis-第七章节-持久化

    目录 概述 RDB AOF 如何选择持久化机制 1.概述 Redis 是内存数据库,如果不能将内存中的数据保存到磁盘中,那么一旦服务器进程退出,服务器的数据库数据也会消失,所以Redis提供了持久化的 ...

  4. 【bzoj2429】[HAOI2006]聪明的猴子（图论--最小瓶颈生成树 模版题）

    题意:有M只猴子,他们的最大跳跃距离为Ai.树林中有N棵树露出了水面,给出了它们的坐标.问有多少只猴子能在这个地区露出水面的所有树冠上觅食. 解法:由于要尽量多的猴子能到达所有树冠,便用Kruskal ...

  5. 牛客15334 Easygoing Single Tune Circulation（后缀自动机+字典树）

    传送门:Easygoing Single Tune Circulation 题意 给定n个字符串 s[i],再给出m个查询的字符串 t[i],问 t[i] 是否为某个 s[i] 循环无限次的子串. 题 ...

  6. A. Vitaly and Strings

    Vitaly is a diligent student who never missed a lesson in his five years of studying in the universi ...

  7. Educational Codeforces Round 89 (Rated for Div. 2) C Palindromic Paths

    题目链接:Palindromic Paths 题意: 给你一个n行m列的矩阵,这个矩阵被0或者1所填充,你需要从点(1,1)走到点(n,m).这个时候会有很多路径,每一条路径对应一个01串,你可以改变 ...

  8. Codeforces Round #345 (Div. 1) A. Watchmen (数学,map)

    题意:给你\(n\)个点,求这\(n\)个点中,曼哈顿距离和欧几里得距离相等的点对数. 题解: 不难发现,当两个点的曼哈顿距离等于欧几里得距离的时候它们的横坐标或者纵坐标至少有一个相同,可以在纸上画一 ...

  9. python 引用（import）文件夹下的py文件

    importlib.import_module动态导入模块: python中schedule模块的简单使用 || importlib.import_module动态导入模块 先看一下文件目录 1.同级 ...

  10. Linux系统编程【1】——编写more命令

    背景介绍 笔者知识背景 笔者接触Linux快一年了.理论知识方面:学习了操作系统基础知识,了解进程调度.内存分配.文件管理.磁盘I/O这些基本的概念. 实操方面:会使用Linux简单命令,在嵌入式系统 ...