控制台中的 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 文档标记检查器，该文件可以验证并且没有显示错误。 我错过了什么？

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

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

也作为一个附带问题：有人能解释一下这 3 个属性是什么：

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