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. 一个基于protocol buffer的RPC实现

    Protocol Buffer仅仅是提供了一套序列化和反序列化结构数据的机制,本身不具有RPC功能,但是可以基于其实现一套RPC框架. Services protocol buffer的Service ...

  2. 单点登录（SSO）的设计与实现

    一.前言 1.SSO说明 SSO英文全称Single Sign On,单点登录.SSO是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统.https://baike.baidu.c ...

  3. 在IDEA中用三个jar包链接MongoDB数据库——实现增删改查

    安装Robo 3T连接MongoDB数据库教程:https://blog.csdn.net/baidu_39298625/article/details/98845789 使用Robo 3T操作Mon ...

  4. HMS Core华为分析丨受众细分，多场景促进精益运营

    用户的偏好不同,对产品的需求也不一样,要想更好地培养用户粘性,就需要因人施策,精细化运营,而受众细分是精细化运营的重要方法之一.受众细分是根据用户属性和行为数据,将具有相同或类似特征的用户归为一个群组 ...

  5. java生成xls

    ------------------------------------------------------初始化xls操纵类-------- import java.io.File; import ...

  6. apache 创建多端口监听

    httpd.conf 将 #LoadModule vhost_alias_module modules/mod_vhost_alias.so 改为 LoadModule vhost_alias_mod ...

  7. 翻译：《实用的Python编程》01_Introduction_00_Overview

    目录 | 下一节 (2 处理数据) 1. Python 简介 本章是第一章,将会从头开始介绍 Python 基础知识,让你从零开始,学会怎么编写.运行.调试一个简单的程序.最后,你可以运用这些 Pyt ...

  8. [SCOI2009] [BZOJ1026] windy数

    windy定义了一种windy数.不含前导零且相邻两个数字之差至少为2的正整数被称为windy数. windy想知道, 在A和B之间,包括A和B,总共有多少个windy数?\(1 \le A \le ...

  9. NOIP2015提高组 信息传递 ---并查集问题

    题目描述 有 n 个同学(编号为 1 到 n )正在玩一个信息传递的游戏.在游戏里每人都有一个固定的信息传递对象,其中,编号为 i 的同学的信息传递对象是编号为 Ti​ 的同学. 游戏开始时,每人都只 ...

  10. AtCoder Beginner Contest 168

    比赛链接:https://atcoder.jp/contests/abc168/tasks A - ∴ (Therefore) 题意 给出一个由数字组成的字符串 $s$,要求如下: 如果 $s$ 以 ...