66 lines
4.7 KiB
XML
66 lines
4.7 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" width="720" height="362" viewBox="0 0 720 362" role="img" aria-labelledby="title description">
|
||
<title id="title">SCADA 演示时间轴 FM 调频盘样式</title>
|
||
<desc id="description">静态设计示意。选定区间为十月八日八点至十四点，当前时间十点十五分。半透明玻璃刻度窗内细密时间刻度横向排列，中央红色指示线固定，控制栏包含暂停、下一批和六十倍速。</desc>
|
||
<defs>
|
||
<linearGradient id="glass" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0" stop-color="#fff" stop-opacity=".72"/>
|
||
<stop offset=".5" stop-color="#f7faff" stop-opacity=".4"/>
|
||
<stop offset="1" stop-color="#fff" stop-opacity=".64"/>
|
||
</linearGradient>
|
||
<linearGradient id="edge" x1="0" y1="0" x2="1" y2="0">
|
||
<stop offset="0" stop-color="#f7f9fc"/>
|
||
<stop offset=".12" stop-color="#f7f9fc" stop-opacity="0"/>
|
||
<stop offset=".88" stop-color="#f7f9fc" stop-opacity="0"/>
|
||
<stop offset="1" stop-color="#f7f9fc"/>
|
||
</linearGradient>
|
||
<filter id="blur"><feGaussianBlur stdDeviation="16"/></filter>
|
||
<filter id="shadow" x="-.1" y="-.3" width="1.2" height="1.6">
|
||
<feDropShadow dx="0" dy="2" stdDeviation="4" flood-color="#243852" flood-opacity=".1"/>
|
||
</filter>
|
||
<clipPath id="window"><rect x="48" y="130" width="624" height="110" rx="12"/></clipPath>
|
||
</defs>
|
||
<rect width="720" height="362" rx="18" fill="#e9edf2"/>
|
||
<rect x="24" y="22" width="672" height="318" rx="16" fill="#fafbfd" stroke="#d7dee7"/>
|
||
<g font-family="'Noto Sans SC Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Noto Sans CJK SC', sans-serif" fill="#263347">
|
||
<text x="48" y="54" font-size="13" font-weight="600">SCADA 时段演示</text>
|
||
<text x="672" y="54" text-anchor="end" font-size="11" fill="#778398">静态样式示意</text>
|
||
<text x="48" y="79" font-size="12" fill="#68758a">演示区间</text>
|
||
<text x="114" y="79" font-size="12">10 月 8 日 08:00 — 14:00</text>
|
||
<text x="360" y="118" text-anchor="middle" font-size="28" font-weight="500" font-variant-numeric="tabular-nums" letter-spacing="1">10:15:00</text>
|
||
<rect x="48" y="130" width="624" height="110" rx="12" fill="#edf2f7" filter="url(#shadow)"/>
|
||
<g clip-path="url(#window)">
|
||
<g filter="url(#blur)" opacity=".6">
|
||
<path d="M12 234 L280 132 L423 247 L749 142" fill="none" stroke="#c7d8e7" stroke-width="35"/>
|
||
<path d="M63 134 L221 219 L438 128 L647 212" fill="none" stroke="#fff" stroke-width="38"/>
|
||
</g>
|
||
<rect x="48" y="130" width="624" height="110" fill="url(#glass)"/>
|
||
<path d="M65 131 H655" stroke="#fff" stroke-width="2" opacity=".9"/>
|
||
<path d="M49 138 V231 M671 138 V231" stroke="#fff" opacity=".6"/>
|
||
<path d="M60 237 H660" stroke="#a8b6c8" opacity=".25"/>
|
||
<g fill="none" stroke="#67778b" stroke-width="1">
|
||
<path d="M90 166 V197 M180 166 V197 M270 166 V197 M360 166 V197 M450 166 V197 M540 166 V197 M630 166 V197"/>
|
||
<path d="M60 179 V196 M120 179 V196 M150 179 V196 M210 179 V196 M240 179 V196 M300 179 V196 M330 179 V196 M390 179 V196 M420 179 V196 M480 179 V196 M510 179 V196 M570 179 V196 M600 179 V196 M660 179 V196" opacity=".65"/>
|
||
</g>
|
||
<g font-size="11" text-anchor="middle" font-variant-numeric="tabular-nums">
|
||
<text x="90" y="216">09:30</text><text x="180" y="216">09:45</text>
|
||
<text x="270" y="216">10:00</text><text x="360" y="216" font-weight="600">10:15</text>
|
||
<g fill="#7b889a"><text x="450" y="216">10:30</text><text x="540" y="216">10:45</text><text x="630" y="216">11:00</text></g>
|
||
</g>
|
||
<rect x="48" y="131" width="624" height="108" fill="url(#edge)"/>
|
||
</g>
|
||
<rect x="48.5" y="130.5" width="623" height="109" rx="11.5" fill="none" stroke="#fff" stroke-opacity=".8"/>
|
||
<path d="M356 141 H364 L360 147 Z" fill="#cf453f"/>
|
||
<path d="M360 147 V201" stroke="#cf453f" stroke-width="2"/>
|
||
<rect x="48" y="256" width="88" height="38" rx="8" fill="#4662ba"/>
|
||
<path d="M65 269 V281 M70 269 V281" stroke="#fff" stroke-width="2"/>
|
||
<text x="98" y="280" text-anchor="middle" fill="#fff" font-size="12">暂停</text>
|
||
<rect x="148" y="256" width="88" height="38" rx="8" fill="#fff" stroke="#d7dee7"/>
|
||
<text x="192" y="280" text-anchor="middle" font-size="12" fill="#7b8799">下一批</text>
|
||
<rect x="578" y="256" width="94" height="38" rx="8" fill="#fff" stroke="#d7dee7"/>
|
||
<text x="601" y="280" font-size="12">60×</text>
|
||
<path d="M651 273 L655 277 L659 273" fill="none" stroke="#64738a" stroke-width="1.5"/>
|
||
<text x="48" y="319" font-size="11" fill="#68758a">已读取 10:15 · 已检测 10:10</text>
|
||
<text x="672" y="319" text-anchor="end" font-size="11" fill="#68758a">红线对应当前时间 · 横向拨动可回看</text>
|
||
</g>
|
||
</svg>
|