控制台中的 Svg 滑块但未显示

Question

我正在尝试构建一个滑块 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 Document Markup Checker，文件验证并显示没有错误。我错过了什么？

最新的 svg 文档声明不使用 doctype 声明，但不管有没有它们都不起作用。它正在控制台中显示，但屏幕上没有图形。

我知道有很多类似的问题，但每个 svg 都不一样，他们的解决方案不起作用。

还有一个附带问题：有人能解释一下这三个属性是什么吗：

     xmlns:sketch="?"
     baseProfile="full"
     filterUnits="objectBoundingBox"

Answer 1

我什至无法在浏览器中显示基本模板。

我将您的 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 画布的边框。调试定位后可以去掉红框。