Question

我是SVG的新手，有人让我创建了此代码。我的问题是我无法修改蓝色图形的大小，因此文本无法容纳。是否有一种更简单的方法来创建此图形，因为我发现的SVG示例看起来要简单得多。

我尝试更改高度/宽度，但确实按预期工作。高度不会改变蓝色图形的高度，但是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类。使用此类，您可以指定高度和宽度。

.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>

SVG图形不适合

1 个答案: