master

分支 (1)

管理

管理

master

svgproject
/
index.html

<!DOCTYPE html>
<html>
  <head>
    <title>SVG.js Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.2.0/svg.min.js"></script>
    <script src="./data.js"></script>
    <style>
      html,
      body {
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div id="svgContainer" ></div>
    <script>
      const CONTAINER_WIDTH = 340;
      const CONTAINER_HEIGHT = 250;

      function drawElement(ele, p){
        var g = p.group();
        if(ele.path){
          g.add(ele.path)
        }
        if(ele.color){
          g.attr("fill", ele.color)
        }
        if(ele.transform){
          g.transform(ele.transform);
        }
      }

      function drawElement1(ele, p){
        var g = p.group();
        if(ele['source_code']){
          g.add(ele['source_code'])
        }
        if(ele.color){
          g.attr("fill", ele.color)
        }
        if(ele.transform){
          g.transform(ele.transform);
        }
        if(ele.filter){
          g.attr("filter", `url(#${ele.filter.id})`);
        }
      }

      // 创建SVG容器
      const draw = SVG()
        .addTo('#svgContainer')
        .size(CONTAINER_WIDTH * 2, CONTAINER_HEIGHT*2)
        .viewbox(0, 0, CONTAINER_WIDTH*2, CONTAINER_HEIGHT*2);


      const defs = draw.defs()
      for(var f of data.filters){
        defs.add(`<filter id='${f.id}'>${f.str}</filter>`)
      }


      var i = 0;
      for(var d of data.data){
        var g = draw.group();
        if(d["background_color"]){
          g.rect(CONTAINER_WIDTH, CONTAINER_WIDTH).fill(d["background_color"]);
        }
        g.translate((i%2)*CONTAINER_WIDTH, Math.floor(i/2)*CONTAINER_HEIGHT)
        if(d['icon_container']){
          drawElement1(d['icon_container'], g);
        }
        if(d.font){
          if(d.font.name){
            for(var n of d.font.name){
              drawElement(n, g);
            }
          }
          if(d.font.slogan){
            for(var s of d.font.slogan){
              drawElement(s, g);
            }
          }
        }
        if(d['icon_normal']){
          drawElement1(d['icon_normal'], g);
        }

        if(d.rects){
          for(var r of d.rects){
            g.rect(r.w, r.h).x(r.x).y(r.y).fill(r.color);
          }
        }
        i++;
      }

      // // 设置背景色
      // draw.rect(CONTAINER_WIDTH, CONTAINER_HEIGHT).fill('#f2f2f2');
      // draw.rect(CONTAINER_WIDTH, CONTAINER_HEIGHT).fill('url(#watermake)');
      // var g0 = draw.group().transform({translate:{x:48, y:97}})
      // var g = g0.group().transform({translate:{x:0, y:8.77}})
      // g = g.group()
      // g.rect(60, 38.30).fill("#9f704f").opacity(0).stroke(2);
      // var svg = SVG().attr("filter", "url(#color1)").size(60, 38.3).attr("filtersec", "color2").attr("style", "overflow:visible")
      //     .addTo(g)

      // SVG().addTo(svg).viewbox(0, 0, 93.6, 61.2)
      //     .path("M75.7 30.6c0 3.5-2.8 6.3-6.3 6.3-5 0-10.3-6.3-10.3-6.3m16.6 0c0-3.5-2.8-6.3-6.3-6.3-5 0-10.3 6.3-10.3 6.3m-24.6 0s-5.2-6.3-10.3-6.3c-3.5 0-6.3 2.8-6.3 6.3m0 0c0 3.5 2.8 6.3 6.3 6.3 5 0 10.3-6.3 10.3-6.3m24.6 0L30.6 2 2 30.6l28.6 28.6 28.5-28.6zm32.5 0L63 2 34.5 30.6 63 59.1l28.6-28.5z")
      //     .fill("none")
      //     .attr({
      //       stroke: "#333",
      //       "stroke-width":"4",
      //       "stroke-linejoin": "round",
      //       "stroke-miterlimit": 10
      //     })


      // const defs = draw.defs()
      // defs.add("<filter id='color1'><feColorMatrix type='matrix' values='0 0 0 0 0.62109375  0 0 0 0 0.4375  0 0 0 0 0.30859375  0 0 0 1 0' /></filter>")
      // defs.add("<filter id='color2'><feColorMatrix type='matrix' values='0 0 0 0 0.99609375  0 0 0 0 0.99609375  0 0 0 0 0.99609375  0 0 0 1 0' /></filter>")
      // defs.add("<filter id='color3'><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0' /></filter>")
      // // svg.filter()

      // const g1 = SVG().group().transform({translate:{x:67, y:0}}).addTo(g0)
      // g1.group()
      //     .attr("stroke", "#333").group().transform({scale:1}).group()
      //     .path("M42.66-18L42.66-15.07L23.98-15.07L23.98 3.69L21.06 3.69L21.06-15.07L2.43-15.07L2.43-18L21.06-18L21.06-33.12L3.19-32.85L3.15-35.82L42.21-36.41L42.25-33.48L23.98-33.16L23.98-18L42.66-18ZM86.67 3.92L86.67 3.92L69.53-2.97L48.15 3.96L47.20 1.13L65.25-4.68L49.27-11.12L50.40-13.86L69.66-6.08L82.98-10.39L82.98-14.17L48.51-14.17L48.51-17.10L84.47-17.10Q85.09-17.10 85.50-16.67Q85.91-16.25 85.91-15.62L85.91-15.62L85.91-9.31Q85.91-8.82 85.63-8.44Q85.37-8.05 84.91-7.92L84.91-7.92L73.94-4.37L87.75 1.17L86.67 3.92ZM77.00-30.73L77.00-18.45L74.03-18.45L74.03-30.73L60.98-30.73L60.98-18.45L58.00-18.45L58.00-30.73L47.34-30.73L47.34-33.66L65.70-33.66L65.20-35.95L68.13-36.54L68.72-33.66L87.66-33.66L87.66-30.73L77.00-30.73ZM55.75-28.39L50.22-18.36L47.66-19.80L53.19-29.83L55.75-28.39ZM87.34-19.80L84.78-18.36L79.20-28.39L81.81-29.83L87.34-19.80ZM129.60 3.87L129.60 3.87L112.86 3.87L112.86 0.94L128.12 0.94L128.12-22.36L99.31-22.36L95.00 4.05L92.07 3.55L98.01-32.40L92.30-32.40L92.30-35.37L132.66-35.37L132.66-32.40L100.98-32.40L99.81-25.29L129.60-25.29Q130.23-25.29 130.66-24.88Q131.09-24.48 131.09-23.85L131.09-23.85L131.09 2.43Q131.09 3.06 130.66 3.46Q130.23 3.87 129.60 3.87L129.60 3.87ZM147.91-4.68L147.91-4.68L145.89-6.88L160.20-20.16L160.20-36.27L163.17-36.27L163.17-22.90L173.97-32.94L176.00-30.78L163.17-18.86L163.17 0.99L177.66 0.99L177.66 3.92L161.69 3.92Q161.06 3.92 160.63 3.49Q160.20 3.06 160.20 2.43L160.20 2.43L160.20-16.11L147.91-4.68ZM141.62 3.92L141.62 3.92L138.65 3.92L138.65-25.96Q138.65-26.32 138.82-26.64L138.82-26.64L143.82-36.85L146.47-35.55L141.62-25.65L141.62 3.92Z")
      //     .transform({translate:{x:-2.43, y:36.85}})

      // g0.group().attr({
      //   "fill-rule": "",
      //   "fill": "#23334b",
      //   "transform": "translate(36.59, 46.90)"
      // }).group().transform({scale: 1}).group().transform({scale: 1})
      //   .path("M2.20-1.03L7.36-1.03L7.36 0L1.03 0L1.03-8.58L7.27-8.58L7.27-7.59L2.20-7.59L2.20-4.92L6.89-4.92L6.89-3.89L2.20-3.89L2.20-1.03ZM9.52-8.58L11.95-1.27L14.44-8.58L15.75-8.58L12.61 0L11.34 0L8.20-8.58L9.52-8.58ZM18.14-1.03L23.30-1.03L23.30 0L16.97 0L16.97-8.58L23.20-8.58L23.20-7.59L18.14-7.59L18.14-4.92L22.83-4.92L22.83-3.89L18.14-3.89L18.14-1.03ZM28.92-3.70L26.11-3.70L26.11 0L24.94 0L24.94-8.58L28.92-8.58Q31.78-8.58 31.78-6.28L31.78-6.28Q31.78-4.88 30.56-4.22L30.56-4.22Q31.59-3.94 31.59-2.58L31.59-2.58L31.69-1.03Q31.64-0.38 32.11-0.19L32.11-0.19L32.11 0L30.66 0Q30.52-0.61 30.47-2.16L30.47-2.16Q30.52-3.70 28.92-3.70L28.92-3.70ZM29.02-7.64L26.11-7.64L26.11-4.69L28.83-4.69Q30.56-4.69 30.56-6.19L30.56-6.19Q30.56-7.64 29.02-7.64L29.02-7.64ZM39.05-3.47L39.05-2.58L33-2.58L33-3.47L39.05-3.47ZM47.58-6.05L47.58-6.05L46.45-6.05Q46.03-7.78 44.06-7.83L44.06-7.83Q41.34-7.69 41.25-4.36L41.25-4.36Q41.25-0.80 44.11-0.80L44.11-0.80Q46.08-0.84 46.55-3.19L46.55-3.19L47.67-3.19Q47.16 0.05 43.88 0.14L43.88 0.14Q40.13 0 40.03-4.31L40.03-4.31Q40.22-8.63 44.06-8.81L44.06-8.81Q47.11-8.72 47.58-6.05ZM50.20-5.06L54.70-5.06L54.70-8.58L55.88-8.58L55.88 0L54.70 0L54.70-3.98L50.20-3.98L50.20 0L49.03 0L49.03-8.58L50.20-8.58L50.20-5.06ZM63.33 0L62.48-2.48L59.02-2.48L58.13 0L56.95 0L60.19-8.58L61.50-8.58L64.59 0L63.33 0ZM60.75-7.31L59.39-3.52L62.06-3.52L60.80-7.31L60.75-7.31ZM67.03-8.58L71.34-1.64L71.34-8.58L72.47-8.58L72.47 0L71.16 0L66.80-6.94L66.75-6.94L66.75 0L65.63 0L65.63-8.58L67.03-8.58ZM80.67-3.61L78.05-3.61L78.05-4.59L81.80-4.59L81.80 0L81.05 0L80.77-1.08Q79.78 0.09 77.95 0.14L77.95 0.14Q76.22 0.14 75.28-0.75L75.28-0.75Q73.88-2.06 73.92-4.36L73.92-4.36Q74.25-8.63 78-8.81L78-8.81Q81.19-8.63 81.66-6L81.66-6L80.53-6Q80.06-7.78 77.95-7.83L77.95-7.83Q75.28-7.64 75.14-4.31L75.14-4.31Q75.14-0.75 78-0.75L78-0.75Q79.03-0.75 79.78-1.31L79.78-1.31Q80.72-2.06 80.67-3.61L80.67-3.61ZM83.77-8.58L84.94-8.58L84.94 0L83.77 0L83.77-8.58ZM88.31-8.58L92.63-1.64L92.63-8.58L93.75-8.58L93.75 0L92.44 0L88.08-6.94L88.03-6.94L88.03 0L86.91 0L86.91-8.58L88.31-8.58ZM101.95-3.61L99.33-3.61L99.33-4.59L103.08-4.59L103.08 0L102.33 0L102.05-1.08Q101.06 0.09 99.23 0.14L99.23 0.14Q97.50 0.14 96.56-0.75L96.56-0.75Q95.16-2.06 95.20-4.36L95.20-4.36Q95.53-8.63 99.28-8.81L99.28-8.81Q102.47-8.63 102.94-6L102.94-6L101.81-6Q101.34-7.78 99.23-7.83L99.23-7.83Q96.56-7.64 96.42-4.31L96.42-4.31Q96.42-0.75 99.28-0.75L99.28-0.75Q100.31-0.75 101.06-1.31L101.06-1.31Q102-2.06 101.95-3.61L101.95-3.61Z")
      //   .transform({translate: {x:-1.03125, y:8.8125}})

      // 保存SVG图形
      const str = draw.svg();
      console.log(str);
    </script>
  </body>
</html>