瀏覽代碼

[Style 0000] SVG图片定位及样式调整

houzekong 1 周之前
父節點
當前提交
20ee177262

+ 2 - 3
src/views/vent/monitorManager/gateMonitor/components/gateDualSVG.vue

@@ -6,10 +6,9 @@
     preserveAspectRatio="none"
     x="0px"
     y="0px"
-    width="1980px"
+    width="1920px"
     height="1080"
-    style="position: relative; left: -30px; top: -180px"
-    viewBox="0 0 1920 1080"
+    viewBox="0 230 1920 1080"
   >
     <defs>
       <linearGradient id="Gradient_1" gradientUnits="userSpaceOnUse" x1="-961.8" y1="-242.45" x2="-961.8" y2="-242.45" spreadMethod="pad">

+ 2 - 3
src/views/vent/monitorManager/gateMonitor/components/gateSVG.vue

@@ -6,10 +6,9 @@
     preserveAspectRatio="none"
     x="0px"
     y="0px"
-    width="1980px"
+    width="1920px"
     height="1080"
-    style="position: relative; left: -20px; top: -150px"
-    viewBox="0 0 1920 1080"
+    viewBox="0 230 1920 1080"
   >
     <defs>
       <linearGradient id="Gradient_1" gradientUnits="userSpaceOnUse" x1="-961.8" y1="-242.45" x2="-961.8" y2="-242.45" spreadMethod="pad">

+ 2 - 3
src/views/vent/monitorManager/gateMonitor/components/gateTripleSVG.vue

@@ -6,10 +6,9 @@
     preserveAspectRatio="none"
     x="0px"
     y="0px"
-    width="1980px"
+    width="1920px"
     height="1080"
-    style="position: relative; left: -20px; top: -150px"
-    viewBox="0 0 1920 1080"
+    viewBox="0 230 1920 1080"
   >
     <defs>
       <linearGradient id="Gradient_1" gradientUnits="userSpaceOnUse" x1="-961.8" y1="-242.45" x2="-961.8" y2="-242.45" spreadMethod="pad">

+ 2 - 3
src/views/vent/monitorManager/windowMonitor/components/windowDualSVG.vue

@@ -6,10 +6,9 @@
     preserveAspectRatio="none"
     x="0px"
     y="0px"
-    width="1980px"
+    width="1920px"
     height="1080"
-    style="position: relative; left: -30px; top: -180px"
-    viewBox="0 0 1920 1080"
+    viewBox="0 230 1920 1080"
   >
     <defs>
       <linearGradient id="Gradient_1" gradientUnits="userSpaceOnUse" x1="-961.8" y1="-242.45" x2="-961.8" y2="-242.45" spreadMethod="pad">

+ 4 - 5
src/views/vent/monitorManager/windowMonitor/components/windowSVG.vue

@@ -6,10 +6,9 @@
     preserveAspectRatio="none"
     x="0px"
     y="0px"
-    width="1980px"
+    width="1920px"
     height="1080"
-    style="position: relative; left: -30px; top: -180px"
-    viewBox="0 0 1920 1080"
+    viewBox="0 230 1920 1080"
   >
     <defs>
       <linearGradient id="Gradient_1" gradientUnits="userSpaceOnUse" x1="-961.8" y1="-242.45" x2="-961.8" y2="-242.45" spreadMethod="pad">
@@ -1635,9 +1634,9 @@
   /** 根据SVG的使用场景播放动画 */
   function animate(data: any, maxarea) {
     // 在SVG图片中,找到需要动起来的元素(类似<use xlink:href="#RE_L_0_Layer0_0_FILL"></use>),并填入id即可控制该元素的动画(如有)
-    const isOpen = parseFloat(data.forntArea) / parseFloat(maxarea);
+    const isOpen = parseFloat(Math.max(parseFloat(data.forntArea) / parseFloat(maxarea), 1).toFixed(2));
     if (isOpen > 0) {
-      triggerAnimation(['Chuang1_shanye_0_Layer0_0_FILL'], false);
+      triggerAnimation(['Chuang1_shanye_0_Layer0_0_FILL'], false, 3000, isOpen);
     } else {
       triggerAnimation(['Chuang1_shanye_0_Layer0_0_FILL'], true);
     }