控制台中的 Svg 滑块但未显示
Rya*_*one 1 xml markup svg semantic-markup
我正在尝试构建一个滑块 svg 模板，我可以用它从浅色主题切换到深色主题，最初的想法是尝试复制我见过的有月亮的设计，然后当它滑动位置时它会转动变成太阳。我已经构建了一个基本模板（还没有任何图形）。然后我可以通过 JavaScript 制作动画。
但是我什至无法在浏览器中显示基本模板。
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!-- xml:lang='en' lang='en'-->
<!DOCTYPE svg [
<!-- entities etc. here -->
]>
<svg version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 145 145"
width="145" height="145" stroke="#ffffff">
<path class="" id="a2aBdbnHKq" fill="black" stroke=""
d="M359.91 269.76C363.84 269.76 367.03 272.95 367.03 276.88C367.03 299.29 367.03 359.4 367.03 381.81C367.03 385.75 363.84 388.93 359.91 388.93C323.48 388.93 221.3 388.93 184.87 388.93C180.94 388.93 177.75 385.75 177.75 381.81C177.75 359.4 177.75 299.29 177.75 276.88C177.75 272.95 180.94 269.76 184.87 269.76C221.3 269.76 323.48 269.76 359.91 269.76Z">
</path>
<path class="circ1" id="C1" fill="#c744f0" stroke=""
d="M242.59 329.35C242.59 362.23 214.59 388.93 180.09 388.93C145.59 388.93 117.58 362.23 117.58 329.35C117.58 296.46 145.59 269.76 180.09 269.76C214.59 269.76 242.59 296.46 242.59 329.35Z">
</path>
<path class="rnd_rect" id="Box1" fill="#c744f0" stroke=""
d="M418.51 329.35C418.51 362.23 390.5 388.93 356 388.93C321.5 388.93 293.49 362.23 293.49 329.35C293.49 296.46 321.5 269.76 356 269.76C390.5 269.76 418.51 296.46 418.51 329.35Z">
</path>
<path class="circ2" id="C2" fill="#c744f0" stroke=""
d="M234.71 329.35C234.71 357.72 210.23 380.76 180.09 380.76C149.94 380.76 125.46 357.72 125.46 329.35C125.46 300.97 149.94 277.94 180.09 277.94C210.23 277.94 234.71 300.97 234.71 329.35Z">
</path>
<defs>
</defs>
</svg>
使用W3 文档标记检查器，该文件可以验证并且没有显示错误。我错过了什么？
最新的 svg 文档声明不使用 doctype 声明，但无论是否使用它们都不起作用。它显示在控制台中，但屏幕上没有图形。
我知道有很多与此类似的问题，但每个 svg 都不同，他们的解决方案不起作用。
也作为一个附带问题：有人能解释一下这 3 个属性是什么：
xmlns:sketch="?"
baseProfile="full"
filterUnits="objectBoundingBox"
我什至无法在浏览器中显示基本模板。
我将您的 svg 文件上传到矢量编辑器。
图片显示你的图形在svg画布之外
它位于下方和右侧并且它的大小超过了画布svg的大小
因此，需要缩小图形的大小并将其向左和向上移动
transform="scale(0.5) translate(-120, -183)"
笔记
左上角是SVG的原点。沿轴的正方向X- 向右，沿轴Y- 向下
<svg version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 145 145"
width="50vw" height="50vh" stroke="#ffffff" style="border:1px solid red;">
<!-- Reduce the size of the figure and move it to the left and up -->
<g transform="scale(0.5) translate(-120, -183)">
<path class="" id="a2aBdbnHKq" fill="black" stroke=""
d="M359.91 269.76C363.84 269.76 367.03 272.95 367.03 276.88C367.03 299.29 367.03 359.4 367.03 381.81C367.03 385.75 363.84 388.93 359.91 388.93C323.48 388.93 221.3 388.93 184.87 388.93C180.94 388.93 177.75 385.75 177.75 381.81C177.75 359.4 177.75 299.29 177.75 276.88C177.75 272.95 180.94 269.76 184.87 269.76C221.3 269.76 323.48 269.76 359.91 269.76Z">
</path>
<path class="circ1" id="C1" fill="#c744f0" stroke=""
d="M242.59 329.35C242.59 362.23 214.59 388.93 180.09 388.93C145.59 388.93 117.58 362.23 117.58 329.35C117.58 296.46 145.59 269.76 180.09 269.76C214.59 269.76 242.59 296.46 242.59 329.35Z">
</path>
<path class="rnd_rect" id="Box1" fill="#c744f0" stroke=""
d="M418.51 329.35C418.51 362.23 390.5 388.93 356 388.93C321.5 388.93 293.49 362.23 293.49 329.35C293.49 296.46 321.5 269.76 356 269.76C390.5 269.76 418.51 296.46 418.51 329.35Z">
</path>
<path class="circ2" id="C2" fill="#c744f0" stroke=""
d="M234.71 329.35C234.71 357.72 210.23 380.76 180.09 380.76C149.94 380.76 125.46 357.72 125.46 329.35C125.46 300.97 149.94 277.94 180.09 277.94C210.23 277.94 234.71 300.97 234.71 329.35Z">
</path>
</g>
<defs>
</defs>
</svg>红框显示了 svg 画布的边框。调试好定位后可以去掉红框。