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. layui的tabletree扩展组件

    需求:点击父级菜单展示子级菜单 难点:某个父级菜单下面有5000条子级菜单(有点坑),当我想把这5000条子级菜单塞到父级菜单下面的时候完蛋了,页面卡死了... 解决:tabletree这组件我发现用 ...

  2. C++类组合问题

    #include <iostream> using namespace std; class Vehicle { public: Vehicle(float speed=0,int tot ...

  3. 8.Cisco DHCP中继详解

    1.网络中的终端通过发送DHCP广播的方式来获取IP地址信息.由于VLAN隔离广播,当终端与DHCP服务器不在同一广播域时,就需要用到DHCP中继. 2.DHCP服务的原理概述: DHCP服务器想要给 ...

  4. Sublime text之中文乱码超简单解决方案

    很多玩程序的小伙伴,刚开始使用Sublime Text神器软件时,都会遇到打开一个程序文件,里面的中文编程乱码,不知道怎么办,网上也有很多不同解决方案,这里小编跟大家分享一个超简单的办法. 打开文档后 ...

  5. 使用C#实现数据结构堆

    一. 堆的介绍: 堆是用来排序的,通常是一个可以被看做一棵树的数组对象.堆满足已下特性: 1. 堆中某个节点的值总是不大于或不小于其父节点的值 任意节点的值小于(或大于)它的所有后裔,所以最小元(或最 ...

  6. idea使用maven的打包工具package不会打上主类解决方法

  7. SQL(replace)替换字段中指定的字符

    语法:update 表名 set 字段名=REPLACE(字段名,'修改前的字符','修改后的字符') 例 Product商品表中Name 名字字段中描述中将'AAA' 修改成 'BBB' SQL语句 ...

  8. 2020 ICPC Universidad Nacional de Colombia Programming Contest

    2020 ICPC Universidad Nacional de Colombia Programming Contest A. Approach 三分 显然答案可以三分,注意\(eps\)还有两条 ...

  9. HttpServletResponse的学习

    关于Response对象的一些方法和属性可以查看官方文档:https://javaee.github.io/javaee-spec/javadocs/ 比如里面定义了许多常量: 这些都是服务器向浏览器 ...

  10. SP3267 DQUERY - D-query 莫队板子题

    题意可见:https://www.luogu.com.cn/problem/SP3267 可在vj上提交:https://vjudge.net/problem/SPOJ-DQUERY 题意翻译 给出一 ...