SVG正常缩放

portal/src/app/hmi/components/industry/fan.ts

@@ -7,6 +7,7 @@ export let FanComponent: HmiComponent = {
   group: "工业",
 
   //color: true,
+  color: true,
 
   values: [
     {name: "open", label: "运行"},
@@ -15,7 +16,16 @@ export let FanComponent: HmiComponent = {
 
   create() {
     //@ts-ignore
-    this.element = this.$container.image().load("/assets/hmi/fan.svg")
+    this.element = this.$container.nested()
+      .viewbox("0 0 1024 1024")
+      .attr("preserveAspectRatio", "xMidYMid meet")
+    //@ts-ignore
+    this.path = this.element.path("M512 1024C229.701818 1024 0 794.298182 0 512S229.701818 0 512 0s512 229.701818 512 512-229.701818 512-512 512z m0-36.584727c262.562909 0 475.415273-212.852364 475.415273-475.415273S774.562909 36.584727 512 36.584727 36.584727 249.437091 36.584727 512 249.437091 987.415273 512 987.415273z m-62.557091-464.430546a73.122909 73.122909 0 1 1 146.292364 0 73.122909 73.122909 0 0 1-146.292364 0z m-54.551273 0a128.558545 128.558545 0 0 0 91.136 99.886546c-33.605818 84.666182 41.053091 210.618182-96.209454 261.026909-72.238545 26.530909-276.805818-57.204364-162.210909-231.517091C279.272727 573.905455 341.736727 538.391273 394.891636 522.984727z m48.407273-73.076363C389.026909 375.296 236.590545 365.754182 271.825455 225.978182c18.618182-73.541818 209.221818-193.303273 294.772363-2.839273 38.493091 85.736727 33.326545 156.392727 16.104727 208.197818a139.077818 139.077818 0 0 0-53.992727-10.845091c-32.442182 0-62.231273 11.031273-85.410909 29.323637z m447.860364 40.96c54.830545 54.318545 64.930909 277.410909-142.894546 249.111272-93.602909-12.8-152.529455-54.272-189.067636-96.023272a131.258182 131.258182 0 0 0 52.596364-126.743273c91.601455-6.283636 175.150545-129.489455 279.365818-26.344727z")
+      .fill("#FFFFFF")
+   //@ts-ignore
+    //this.element.viewbox("0 0 1024 1024").attr("preserveAspectRatio", "xMinYMin meet")
+    //this.element = this.$container.image().load("/assets/hmi/fan.svg")
+    //this.element = this.$container.svg(`<svg viewBox="0 0 1024 1024" preserveAspectRatio="xMinYMin meet" width="200" height="200"><path d="M512 1024C229.701818 1024 0 794.298182 0 512S229.701818 0 512 0s512 229.701818 512 512-229.701818 512-512 512z m0-36.584727c262.562909 0 475.415273-212.852364 475.415273-475.415273S774.562909 36.584727 512 36.584727 36.584727 249.437091 36.584727 512 249.437091 987.415273 512 987.415273z m-62.557091-464.430546a73.122909 73.122909 0 1 1 146.292364 0 73.122909 73.122909 0 0 1-146.292364 0z m-54.551273 0a128.558545 128.558545 0 0 0 91.136 99.886546c-33.605818 84.666182 41.053091 210.618182-96.209454 261.026909-72.238545 26.530909-276.805818-57.204364-162.210909-231.517091C279.272727 573.905455 341.736727 538.391273 394.891636 522.984727z m48.407273-73.076363C389.026909 375.296 236.590545 365.754182 271.825455 225.978182c18.618182-73.541818 209.221818-193.303273 294.772363-2.839273 38.493091 85.736727 33.326545 156.392727 16.104727 208.197818a139.077818 139.077818 0 0 0-53.992727-10.845091c-32.442182 0-62.231273 11.031273-85.410909 29.323637z m447.860364 40.96c54.830545 54.318545 64.930909 277.410909-142.894546 249.111272-93.602909-12.8-152.529455-54.272-189.067636-96.023272a131.258182 131.258182 0 0 0 52.596364-126.743273c91.601455-6.283636 175.150545-129.489455 279.365818-26.344727z" fill="#ffffff"></path></svg>`).first()
   },
 
   setup(props: any): void {
@@ -23,9 +33,10 @@ export let FanComponent: HmiComponent = {
     let p = this.$properties
     if (props.hasOwnProperty("width") || props.hasOwnProperty("height"))//@ts-ignore
       this.element.size(p.width, p.height)
-    if (props.hasOwnProperty("color"))//@ts-ignore
-      this.element.fill(p.color)
-
+    if (props.hasOwnProperty("fill"))//@ts-ignore
+      this.path.fill(p.fill)
+    if (props.hasOwnProperty("x") || props.hasOwnProperty("y"))//@ts-ignore
+      this.element.move(p.x, p.y)
   },
 
   update(values: any) {