Question

我正在尝试控制和操作svg中的元素。

基本上，我希望文本在屏幕中间变小。如果我正在使用div类，但是将其放在svg中，则该元素的顶部将不在屏幕上。

  .square {background-color: 
    white; width 10px; height: 
    30px; font-size: 10px; 
    color: green; text-align: 
    center;position: relative; 
    relative: 200px;}

    .square {animation: img 
    100s linear infinite } 
    @keyframes img  {

    from {

    transform: translate3d(0px, 
    0px, 10px) scale(.5);

    }

    to {

    transform: translate3d(0px, 
    0px, 10px) scale(170.8);

    }

    }

    svg {height: 100%; width: 
    100%;}

    <svg viewBox="0 0 240 80"  
    xmlns="http://www.w3.org/
    2000/svg">
  
    <style>
    .square {fill: green; 
    position: relative; top: 
    50px;} 
    </style>

    <text class="square">square</text>
    </svg>

当我使用CSS将元素设置为position: relative; top: 100px时，为什么不接受指令？

我不确定，所以我尝试用样式标签定义它，尽管这可以设置颜色，但不能用于定位。

所以我该如何将元素放置在所需的位置，因为当前单词的一半不在屏幕上，而且我无法移动它。此外。而不是像在屏幕中间那样以缩放的方式从小文本变成大文本，而是从屏幕的左小到屏幕的大右。为什么呢

用svg更改元素

0 个答案: