控制台中的 Svg 滑块但未显示
Svg Slider in console but not showing
我正在尝试构建一个滑块 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 都不一样，他们的解决方案都行不通。
还有一个附带问题：谁能解释一下这 3 个属性是什么：
xmlns:sketch="?"
baseProfile="full"
filterUnits="objectBoundingBox"
I can't even get the basic template to show in the browser.
我已将您的 svg 文件上传到矢量编辑器。
图片显示你的图在svg外canvas
它位于下方和右侧，其大小超过 canvas 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 的边框 canvas。调试定位后可以去掉红框
我正在尝试构建一个滑块 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 都不一样，他们的解决方案都行不通。
还有一个附带问题：谁能解释一下这 3 个属性是什么：
xmlns:sketch="?"
baseProfile="full"
filterUnits="objectBoundingBox"
I can't even get the basic template to show in the browser.
我已将您的 svg 文件上传到矢量编辑器。
图片显示你的图在svg外canvas
它位于下方和右侧，其大小超过 canvas 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 的边框 canvas。调试定位后可以去掉红框