SVG 元素是否可以有宽度过渡？
[英]Is it possible for an SVG element to have a width transition?
问题描述
我有以下 SVG：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"> <rect width="160" height="160" rx="0" ry="0" transform="matrix(.707107 0.707107-.707107 0.707107 150 36.862915)" fill="none" stroke="#000" /> <line x1="-15" y1="0" x2="15" y2="0" transform="translate(135 150)" fill="none" stroke="#3f5787" stroke-width="3" /> <line x1="-15" y1="0" x2="15" y2="0" transform="translate(165 150)" fill="none" stroke="#3f5787" stroke-width="3" /> <line x1="-15" y1="0" x2="15" y2="0" transform="matrix(0 1-1 0 150 135)" fill="none" stroke="#3f5787" stroke-width="3" /> <line x1="-15" y1="0" x2="15" y2="0" transform="matrix(0 1-1 0 150 165)" fill="none" stroke="#3f5787" stroke-width="3" /> </svg>
我正在使用 Vue.js 动态修改 SVG 内每个line元素的x1属性的值，因为它会更改该行的宽度。
但是，如果在该宽度发生变化时存在 CSS 过渡，那会更好，但我无法让它工作，因为它是x1属性的值在变化，而不是该元素的宽度。
0 个解决方案
可能有基于％的元素大小，但有最大PX宽度它会转到？
[英]Possible To Have % Based Element Size, But Have Maximum PX Width It Will Goto?
伸缩容器内的每个伸缩元素是否有可能在增长/收缩时有不同的过渡时间？
[英]Is it possible to have different transition times for each flex element inside a flex container on grow/shrink?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.