SVG Rect Ignores Height?

前端 未结 3 756
执念已碎
执念已碎 2021-01-12 06:31

Here is a working demo of a rectangle. I\'d like to move the height property to css and well, it doesn\'t work and gives me a blank. It happens in firefox and chrome.

<
相关标签:
3条回答
  • 2021-01-12 06:35

    The width of a <rect> element isn't a CSS property in SVG, it's only usable as an attribute. It's for example like the size of a <select> element in HTML. You can only set it as an attribute.

    0 讨论(0)
  • 2021-01-12 06:56

    In SVG the x, y, width and height of <rect> elements are attributes rather than CSS properties. Only CSS properties can be styled using CSS.

    0 讨论(0)
  • 2021-01-12 06:59

    SVG doesn't have a straightforward support for CSS for setting shape dimensions.

    However there's a workaround for rects, which can also be used to generate horizontal and vertical lines:

    • Set width and height to 1, and use CSS transform: scale(width, height)
    • Don't specify x,y location, and use transform: translate(x, y)

    E.g.

    .svg {
      width: 100px;
      height: 30px;
    }
    .rectangle {
      transform: scale(30, 10);
      fill: orange;
    }
    .horiz-line {
      transform: translate(15px,5px) scale(50, 1);
      fill: red;
    }
    .vert-line {
      transform: translate(10px, 5px) scale(1, 30);
      fill: blue;
    }
    <svg>
      <rect class="rectangle" width="1" height="1" />
      <rect class="horiz-line" width="1" height="1" />
      <rect class="vert-line" width="1" height="1" />
    </svg>

    0 讨论(0)
提交回复
热议问题