我正在制作一个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>
仍然没有来,我尝试这样做的动画
<animate attributeName="width" from="0" to="200" dur="5s" />
谁能告诉我如何达到这个输出?如有任何帮助,不胜感激
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>