Question

我刚刚开始在html中使用svg，并且在操作viewbox / svg窗口大小时遇到了一些困难。

我正在使用这个例子

https://codepen.io/musgrove/pen/azGXNR

我希望将svg窗口缩小到图形高度的大小，这样就可以将它与我的html页面一起使用。

我希望宽度保持在100÷但是svg的高度应限制为显示的实际文本。否则，svg文本对象上方和下方都有一个大的空间缓冲区。

我无法设置偏移量来纠正这个问题，因为偏移量会根据字体的大小与设备或div所包含的div的大小相关而动态变化。

以下是示例代码

HTML

svg {
  position: relative;
  width: auto;
  height: auto;
  /*if i set this to a specific height it does not work*/
}

.text {
  fill: none;
  stroke-width: 6;
  stroke-linejoin: round;
  stroke-dasharray: 70 330;
  stroke-dashoffset: 0;
  -webkit-animation: stroke 6s infinite linear;
  animation: stroke 6s infinite linear;
}

.text:nth-child(5n + 1) {
  stroke: #F2385A;
  -webkit-animation-delay: -1.2s;
  animation-delay: -1.2s;
}

.text:nth-child(5n + 2) {
  stroke: #F5A503;
  -webkit-animation-delay: -2.4s;
  animation-delay: -2.4s;
}

.text:nth-child(5n + 3) {
  stroke: #E9F1DF;
  -webkit-animation-delay: -3.6s;
  animation-delay: -3.6s;
}

.text:nth-child(5n + 4) {
  stroke: #56D9CD;
  -webkit-animation-delay: -4.8s;
  animation-delay: -4.8s;
}

.text:nth-child(5n + 5) {
  stroke: #3AA1BF;
  -webkit-animation-delay: -6s;
  animation-delay: -6s;
}

@-webkit-keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}

@keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}

.indexNewTitle {
  background: #212121;
  /*background-size: .2em 100%;*/
  font: 14.5em/1 Open Sans, Impact;
  /*lowering the font size ruins the effect being sought in the example */
  /*text-transform: uppercase;*/
  /*margin: 0;*/
}

<div class="indexNewTitle">

  <svg viewBox="0 0 1320 300">

    <!-- Symbol -->
    <symbol id="s-text">
    <text text-anchor="middle"
    x="50%" y="50%" dy=".35em">
    Test
    </text>
    </symbol>

    <!-- Duplicate symbols -->
    <use xlink:href="#s-text" class="text"
    ></use>
    <use xlink:href="#s-text" class="text"
    ></use>
    <use xlink:href="#s-text" class="text"
    ></use>
    <use xlink:href="#s-text" class="text"
    ></use>
    <use xlink:href="#s-text" class="text"
    ></use>

    </svg>

</div>

我已经尝试将视图框设置为较小的尺寸，指定svg高度，更改字体大小并将svg放置在受限制的div高度而没有任何运气。

非常感谢任何帮助。

由于

svg viewBox大小和位置

0 个答案: