[尝试将电池指示器放置在父SVG中。子SVG <svg viewBox="0 0 24 24">
元素具有电池的路径和一个显示百分比的文本元素。通过两个css转换和文本属性对其进行定位。文本为在chrome / firefox中打开时正确定位,但在野生动物园中会偏离分支。
<text
text-anchor="middle"
dominant-baseline="middle"
style="transform:translate(50%,98%) scale(.2);
font:700 13px sans-serif;fill:#deba78"
>24.2%</text>
您可以为文本提供一些属性,例如x和y ans y,而不是翻译文本。除了缩放文本外,您还可以更改字体大小。
对于路径,您可以选择s vg转换,如下所示:
body {
width: 200px;
}
.bg {
fill: #beeb1b;
}
.cap {
fill: #aaa8a9;
}
.trunk {
fill: #231f20;
}
<svg xmlns="http://www.w3.org/2000/svg" tabindex="0" viewBox="0 0 351.33 722" aria-labelledby="bottletitle bottledesc" role="img">
<title id="bottletitle">
Bottle
</title>
<desc id="bottledesc">
Bottle with battery indicator inside
</desc>
<g data-name="Layer 4" class="bg">
<rect width="351.33" height="722" rx="23.33" ry="23.33"/>
</g>
<g data-name="Layer 3" class="cap">
<rect x="146.81" y="60.9" width="57.71" height="73.67"/>
</g>
<g data-name="Layer 2" class="trunk">
<path d="M173,153.25h57.75V223s1.08,25.33,30.41,56c27.06,28.29,35.34,60.33,35,71.33-.21,7,0,324.67,0,324.67s-3.33,7.33-9.33,7.33H117.12s-9-.33-9-6.66v-325s-.33-33,30.34-67c0,0,34.33-32.67,34.33-60.67S173.33,153.63,173,153.25Z" transform="translate(-26.46 -18.67)"/>
</g>
<svg viewBox="0 0 24 24">
<defs>
<linearGradient id="lg" x1="0.5" y1="1" x2="0.5" y2="0">
<stop offset="0%" stop-opacity="1" stop-color="#2ecc71"/>
<stop offset="24.2%" stop-opacity="1" stop-color="#2ecc71"/>
<stop offset="24.2%" stop-opacity="0" stop-color="#2ecc71"/>
<stop offset="100%" stop-opacity="0" stop-color="#2ecc71"/>
<animate attributeName="y2" from="1" to="0" dur="500ms" repeatCount="2s" fill="freeze"/>
</linearGradient>
</defs>
<path fill="url(#lg)" d="M15.67 4H14V2h-4v2H8.33C7.6 4 7 4.6 7 5.33v15.33C7 21.4 7.6 22 8.33 22h7.33c.74 0 1.34-.6 1.34-1.33V5.33C17 4.6 16.4 4 15.67 4z" stroke="#fff" transform="scale(.5,.5) rotate(90,12 12) translate(45,-12)"/>
<text text-anchor="middle" dominant-baseline="middle" style="font:700 2.5px sans-serif;fill:#deba78" x="12" y="23">
24.2%
</text>
</svg>
</svg>