ykxiao
/
DemuMesDataV
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Explicitly set the SVG width and height

This commit is contained in:
jiaming743 2019-07-05 13:49:42 +08:00
parent 72433f8ff1
commit 6d4baac3b6
10 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/borderBox2/src/main.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="dv-border-box-2" :ref="ref">
<svg class="dv-border-svg-container">
<svg class="dv-border-svg-container" :width="width" :height="height">
<polyline class="dv-bb2-line1"
:points="`2, 2 ${width - 2} ,2 ${width - 2}, ${height - 2} 2, ${height - 2} 2, 2`" />
<polyline class="dv-bb2-line2"

2
src/components/borderBox3/src/main.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="dv-border-box-3" :ref="ref">
<svg class="dv-border-svg-container">
<svg class="dv-border-svg-container" :width="width" :height="height">
<polyline class="dv-bb3-line1"
:points="`4, 4 ${width - 22} ,4 ${width - 22}, ${height - 22} 4, ${height - 22} 4, 4`" />
<polyline class="dv-bb3-line2"

2
src/components/borderBox4/src/main.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="dv-border-box-4" :ref="ref">
<svg :class="`dv-border-svg-container ${reverse && 'dv-reverse'}`">
<svg :class="`dv-border-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
<polyline class="dv-bb4-line-1" :points="`145, ${height - 5} 40, ${height - 5} 10, ${height - 35}
10, 40 40, 5 150, 5 170, 20 ${width - 15}, 20`"/>
<polyline class="dv-bb4-line-2" :points="`245, ${height - 1} 36, ${height - 1} 14, ${height - 23}

2
src/components/borderBox5/src/main.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="dv-border-box-5" :ref="ref">
<svg :class="`dv-svg-container ${reverse && 'dv-reverse'}`">
<svg :class="`dv-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
<polyline class="dv-bb5-line-1" :points="`8, 5 ${width - 5}, 5 ${width - 5}, ${height - 100}
${width - 100}, ${height - 5} 8, ${height - 5} 8, 5`" />
<polyline class="dv-bb5-line-2" :points="`3, 5 ${width - 20}, 5 ${width - 20}, ${height - 60}

2
src/components/borderBox6/src/main.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="dv-border-box-6" :ref="ref">
<svg class="dv-svg-container">
<svg class="dv-svg-container" :width="width" :height="height">
<circle cx="5" cy="5" r="2"/>
<circle :cx="width - 5" cy="5" r="2" />
<circle :cx="width - 5" :cy="height - 5" r="2" />

4
src/components/borderBox7/src/main.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="dv-border-box-7" :ref="ref">
<svg class="dv-svg-container">
<svg class="dv-svg-container" :width="width" :height="height">
<polyline class="dv-bb7-line-width-2" :points="`0, 25 0, 0 25, 0`" />
<polyline class="dv-bb7-line-width-2" :points="`${width - 25}, 0 ${width}, 0 ${width}, 25`" />
<polyline class="dv-bb7-line-width-2" :points="`${width - 25}, ${height} ${width}, ${height} ${width}, ${height - 25}`" />
@ -33,9 +33,9 @@ export default {
</script>
<style lang="less">
.dv-border-box-7 {
@color: fade(gray, 30);
.dv-border-box-7 {
position: relative;
width: 100%;
height: 100%;

2
src/components/borderBox8/src/main.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="dv-border-box-8" :ref="ref">
<svg class="dv-svg-container">
<svg class="dv-svg-container" :width="width" :height="height">
<defs>
<path
:id="path"

2
src/components/borderBox9/src/main.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="dv-border-box-9" :ref="ref">
<svg class="dv-svg-container">
<svg class="dv-svg-container" :width="width" :height="height">
<defs>
<linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#11eefd" />

2
src/components/decoration8/src/main.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="dv-decoration-8" :ref="ref">
<svg>
<svg :width="width" :height="height">
<polyline
stroke="#3f96a5"
stroke-width="2"