css - svg 图形不适合

Question

我是 SVG 的新手，有人为我创建了这段代码。我的问题是我无法修改蓝色图形的大小以使文本适合。有没有更简单的方法来创建此图形，因为我发现 SVG 示例看起来更简单。

我尝试更改高度/宽度，但它确实按预期工作。 height 没有改变蓝色图形的高度，但是 width 属性改变了高度？

http://andrewt.com.au/cta/

_

<div data-svg-id="c5364617a0184af19456d25c95059d8f.svg" data-svg-type="shape" data-display-mode="fit" data-strokewidth="0" data-viewbox="0 0 200 200" data-preserve-viewbox="ignore" class="SvgShp0-ty9_hvnoyof9" id="comp-jjjncesq" style="left: px;width: 430px;position: absolute;top: 22px;height: 200px;"><div class="SvgShp0-ty9_hvnoyof9_comp-jjjncesq SvgShp0-ty9_hvnoyof9_non-scaling-stroke SvgShp0-ty9_hvnoyof9svg" id="comp-jjjncesqsvg" style="fill-opacity: 1; stroke-width: 0; stroke: rgb(0, 0, 0); stroke-opacity: 1; fill: rgb(7, 166, 252);"><svg xmlns="http://www.w3.org/2000/svg" viewBox="18.5 63.106998443603516 163 74.78599548339844" role="img" preserveAspectRatio="xMidYMid meet" style="stroke-width: 0px;">
    <g>
        <path d="M181.5 63.107h-163v62.978h129.423l17.206 10.897 1.436.911-.352-1.664-2.141-10.144H181.5V63.107z"></path>
    </g>
</svg>
</div><div id="comp-jjjncesqlink" class="SvgShp0-ty9_hvnoyof9link"></div></div>

Answer 1

看起来样式是使用 style="width: 250px" 内联添加到 SVG 中的> 类。使用此类，您可以指定高度和宽度。

.my-svg {
  left: 10px;
  width: 60%;
  position: absolute;
  top: 10px;
  height: 200px;
}

<div data-svg-id="c5364617a0184af19456d25c95059d8f.svg" data-svg-type="shape" data-display-mode="fit" data-strokewidth="0" data-viewbox="0 0 200 200" data-preserve-viewbox="ignore" class="SvgShp0-ty9_hvnoyof9 my-svg" id="comp-jjjncesq">
  <div class="SvgShp0-ty9_hvnoyof9_comp-jjjncesq SvgShp0-ty9_hvnoyof9_non-scaling-stroke SvgShp0-ty9_hvnoyof9svg" id="comp-jjjncesqsvg" style="fill-opacity: 1; stroke-width: 0; stroke: rgb(0, 0, 0); stroke-opacity: 1; fill: rgb(7, 166, 252);"><svg xmlns="http://www.w3.org/2000/svg" viewBox="18.5 63.106998443603516 163 74.78599548339844" role="img" preserveAspectRatio="xMidYMid meet" style="stroke-width: 0px;">
    <g>
        <path d="M181.5 63.107h-163v62.978h129.423l17.206 10.897 1.436.911-.352-1.664-2.141-10.144H181.5V63.107z"></path>
    </g>
</svg>
  </div>
  <div id="comp-jjjncesqlink" class="SvgShp0-ty9_hvnoyof9link"></div>
</div>