![](/img/trans.png)
[英]CSS transition animation is not applied on inline svg <text> but on <rect> it works fine?
[英]SVG <rect> with text and div fill width with transition
我正在研究 SVG 在这里我想要一个矩形来在 div 内添加文本并使用我尝试过的过渡进行颜色填充
<g>
<rect width="25%" height="100%" fill="blue"></rect>
<rect width="100%" height="100%" fill="none"></rect>
<text x="0" y="50" font-size="35" fill="green">text here</text>
</g>
仍然没有来,对于 animation 我试过这样
<animate attributeName="width" from="0" to="200" dur="5s" />
谁能向我建议如何实现这个 output。 任何帮助将不胜感激
svg { width: 200px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="slider1" type="range" min="0" max="100" step="25" value="25" oninput="document.querySelector(`#SVG${this.id} rect`).setAttribute('width',this.value+'%')" /> <svg id="SVGslider1" viewBox="0 0 30 6"> <rect width="25%" height="100%" fill="blue" /> <rect width="100%" height="100%" fill="none" stroke="black"/> </svg>
尝试在文本上调整x
、 y
和font-size
并为rect
添加一个transition
属性:
svg { width: 200px; } rect { transition: width 0.5s; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="slider1" type="range" min="0" max="100" step="25" value="25" oninput="document.querySelector(`#SVG${this.id} rect`).setAttribute('width',this.value+'%')" /> <svg id="SVGslider1" viewBox="0 0 30 6"> <rect width="25%" height="100%" fill="blue" /> <rect width="100%" height="100%" fill="none" stroke="black"/> <text x="5" y="5" font-size="6" fill="green">text here</text> </svg>
编辑:要使<rect>
元素垂直填充,将width
交换为height
和y
:
svg { width: 200px; } rect { transition: y 0.5s, height 0.5s; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="slider1" type="range" min="0" max="100" step="25" value="25" oninput="document.querySelector(`#SVG${this.id} rect`).setAttribute('height',this.value+'%');document.querySelector(`#SVG${this.id} rect`).setAttribute('y',100-this.value+'%')" /> <svg id="SVGslider1" viewBox="0 0 30 6"> <rect y="75%" width="100%" height="25%" fill="blue" /> <rect width="100%" height="100%" fill="none" stroke="black"/> <text x="5" y="5" font-size="6" fill="green">text here</text> </svg>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.