Explicitly set the SVG width and height
This commit is contained in:
parent
72433f8ff1
commit
6d4baac3b6
|
@ -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"
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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" />
|
||||
|
|
|
@ -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">
|
||||
@color: fade(gray, 30);
|
||||
|
||||
.dv-border-box-7 {
|
||||
@color: fade(gray, 30);
|
||||
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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" />
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="dv-decoration-8" :ref="ref">
|
||||
<svg>
|
||||
<svg :width="width" :height="height">
|
||||
<polyline
|
||||
stroke="#3f96a5"
|
||||
stroke-width="2"
|
||||
|
|
|
@ -368,7 +368,7 @@ export default {
|
|||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
|
|
Loading…
Reference in New Issue