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. 【ElasticSearch】 使用AWS云ES服务来分析程序日志

    最近公司系统升级,有些API的调用接口达到了每天10几万的请求量.目前公司里的日志,都是写文本文件中的.为了能够更好的分析这些日志数据,公司采用了AWS 的 ElasticSearch服务来分析日志. ...

  2. JavaWeb——过滤器及监听器

    什么是过滤器? 过滤器示意图 Filter是如何实现拦截的? Filter的生命周期 Filter的创建 Filter的销毁 FilterConfig接口 Servlet过滤器有关接口 过滤器配置 F ...

  3. Spring Boot的进阶和高级

    一.Repository接口 二.Repository子接口 三.@Query注解 四.更新及删除操作整合事物 五.CrudRepository接口 六.PagingAndSortingReposit ...

  4. php小项目-web在线文件管理器

    php小项目-web在线文件管理器 一 项目结果相关视图 二 项目经验 通过简单的实现小项目,对php的文件相关操作更加熟悉,主要用于熟悉文件的相关操作 三 源代码下载地址 http://files. ...

  5. 对项目版本自动控制——利用gitversion

    对项目版本自动控制--利用gitversion 目录 对项目版本自动控制--利用gitversion 1 为什么需要自动版本控制 2 如何使项目版本一目了然 3 Dot Net Core,程序集中的版 ...

  6. Object类的常见方法总结

    ♧ Object类是比较特殊的类,它是所有类的父类.主要提供了11个方法(JDK 1.8为例): /** * native方法,用于返回当前运行时对象的Class对象,使用final关键字修饰,子类不 ...

  7. Windows下使用poetry和pyproject.toml

    0. 题引 为什么要使用poetry? 因为想使用pyproject.toml,并通过pyproject.toml进行依赖包管理,目前pip还不支持,所以poetry是首选 为什么要使用pyproje ...

  8. 2019牛客暑期多校训练营（第七场）F-Energy stones（思维+树状数组）

    >传送门< 题意:有n块能量石,每秒钟会增加Li的能量,但是一旦增长到了Ci它就不会增长了,它初始的能量为Ei. 现在有若干个时刻ti,会选择下标在[Si,Ti]的能量石吸取它们的能量,这 ...

  9. 数组复制函数memcpy和strcpy

    strcpy和memcpy主要有以下3方面的区别.1.复制的内容不同.strcpy只能复制字符串,而memcpy可以复制任意内容,例如字符数组.整型.结构体.类等.2.复制的方法不同.strcpy不需 ...

  10. Codeforces Round #648 (Div. 2) B. Trouble Sort

    一开始读错题了...想当然地认为只能相邻元素交换...(然后换了两种写法WA了4发,5分钟切A的优势荡然无存) 题目链接:https://codeforces.com/contest/1365/pro ...