0

I drew some waves in SVG. Now I want to embed these waves in HTML. There I have a few questions about:

  • How to put the waves in the middle of the side? Or somewhere else?
  • Is it then possible to adjust the width and height of the whole SVG and the individual paths will adjust to the new size?
  • Is the Transform Matrix mandatory?

The goal should be to adjust the fill color of every single wave and adjust the size of the whole svg.

Thanks for your help!

.gelb {
  fill: blue;
  stroke-width: 2px;
  stroke: black;
}
  <svg>
    <g transform="matrix(1.3333333,0,0,-1.3333333,-274.25954,566.37847)">
      <path class="gelb"
        d="m 209.84872,377.17703 c -0.0466,0.29125 -0.12714,1.08201 -0.17904,1.75725 l -0.0944,1.2277 1.85518,0.73529 c 2.30839,0.91492 3.36862,1.23849 5.42203,1.65472 1.46427,0.29682 1.98467,0.32605 5.50514,0.30921 2.27141,-0.0109 4.04141,-0.0799 4.25695,-0.16615 0.30272,-0.12107 0.48041,-0.44835 0.98998,-1.82342 0.34157,-0.92173 0.5941,-1.70281 0.56117,-1.73574 -0.0329,-0.0329 -0.67283,0.0345 -1.42199,0.14975 -2.60018,0.40017 -4.76556,0.51234 -6.93444,0.35923 -3.31903,-0.2343 -5.13115,-0.7151 -8.1278,-2.15651 l -1.74813,-0.84087 z"
        id="Welle1_links" />
      <path class="gelb"
        d="m 237.04566,377.41413 c -1.47982,0.1952 -3.34978,0.55945 -3.46534,0.675 -0.0358,0.0358 0.19728,0.63302 0.51797,1.32715 0.52295,1.13193 0.61587,1.2525 0.90122,1.1695 2.1964,-0.63892 6.76859,-0.8563 9.46215,-0.44987 1.24189,0.18738 3.36521,0.81829 4.80559,1.4279 0.77652,0.32864 0.85462,0.3048 0.75981,-0.23202 -0.0455,-0.2574 -0.15584,-0.90143 -0.24527,-1.43117 l -0.16262,-0.96318 -1.24494,-0.45047 c -3.30855,-1.19717 -7.42829,-1.58732 -11.32857,-1.07284 z"
        id="Welle1_rechts" />
    </g>
  </svg>
InFlames82
  • 493
  • 6
  • 17
  • Check this https://stackoverflow.com/questions/19255296/is-there-a-way-to-use-svg-as-content-in-a-pseudo-element-before-or-after – Lhew Dec 20 '19 at 12:31
  • In this solution (
    ) I can't adjust for example the fill color of a specific wave with javascript because I embeded the whole SVG. Or is there a way to do it?     – InFlames82 Dec 20 '19 at 12:36

0 Answers0