前端web設定熱點區域 通過 SVG

2022-09-03 02:36:07 字數 1925 閱讀 7832

在一張上加熱點區域可以通過標籤來實現,也可以直接使用匯出的 svg 檔案直接完成熱點區域的繪製。

通過標籤的方法:https://

1、需要先將所需大圖示注出可點選區域後,匯出為svg檔案,嵌入當前html檔案中。

<

body

oncopy

="return false"

oncut

="return false"

onselectstart

="return false"

oncontextmenu

="return false"

ondragstart

="return false"

>

<

div

class

="content"

>

<

svg

id="svgrootdom"

xmlns

=""xmlns:xlink

=""preserveaspectratio

="xminymin meet"

width

="5522"

height

="1376"

viewbox

="0,0,5522,1376"

>

<

defs

>

<

style

>

.cls-1, .cls-2

.cls-2

style

>

defs

>

<

image

id="背景"

。。。更多區域省略

<

path

onclick

="clickitem('m053','000')"

id="_8-6"

data-name

="8-6"

class

="cls-1"

d="m5153.13,1128.25h188.14v213.72h5153.13v1128.25z"

/>

svg>

div>

body

>

2、新增相應的js控制繪製區域的縮放

3、在html中,用image引入原資訊作為背景

<

image

id="背景"

web設定div的顏色 web前端小白科普集

每乙個寫前端的人都有不同的故事.但是都是基礎從零開始.實習公司用的框架也好,網上查到的例子也好,都是需要基礎才可以看懂的.那基礎是什麼呢,我覺得就是常用的前端的一切.我剛寫前端三個月.整理一下自己學到的知識.html是world wide web上統一的語言。指的是超文字標記語言 hyper tex...

通過js在web前端增加水印

展示效果 前面頁面新增此方法 settings functionwatermark settings 採用配置項替換預設值,作用類似jquery.extend if arguments.length 1 typeofarguments 0 object for keyinsrc varotemp d...

web前端學習 CSS樣式設定技巧

一 水平居中設定 在實際工作中常會遇到需要設定水平居中的場景,比如為了美觀,文章的標題一般都是水平居中顯示的。我們將其分為兩種情況 行內元素和塊狀元素,塊狀元素裡面又分為定寬塊狀元素,以及不定寬塊狀元素。1.行內元素 如果被設定元素為文字 等行內元素時,水平居中是通過給父元素設定text align...