主页 / 问题 / 1306906
Accepted
Leonid
Asked:2022-07-20 13:53:01 +0000 UTC2022-07-20 13:53:01 +0000 UTC

如何将视图框带到 SVG 的中间？

  • 772

我指定了视图框以窥视圆的“非理想”交界处可能存在的缺陷，但我只是无法使该部分变大并位于 SVG 的中间。毕竟，我指定了视图框，同时考虑到目标点的相同缩进，左右和上下。

但实际上，我将图像压到了某个边缘。我在这里阅读了所有关于视口 - 视图框的文章，但我没有找到任何关于定位的内容。

您需要看到“60 109.99999 60.00002 110.00001”部分的全部荣耀。

<svg xmlns="http://www.w3.org/2000/svg" viewbox="60 109.99999 60.00002 110.00001">
    <path d="M60 110 A 50 50 0 1 1 60.00001 110 z"
       stroke="black" fill="rgb(180,180,255)"/> 
</svg>

我究竟做错了什么？

svg

2 个回答

  1. Best Answer

    但是我不能让这个部分很大并且在 SVG 的中间。

    步骤 1.找出SVG 形状的物理尺寸

    更具体地说，我们需要知道 svg 形状的边界矩形的宽度和高度，以及它从 SVG 画布左上角开始的 x,y 坐标。

    使用js方法getBBox()

    <svg xmlns="http://www.w3.org/2000/svg" viewbox="60 109.99999 60.00002 110.00001">
    <path id="path" d="M60 110 A 50 50 0 1 1 60.00001 110 z"
       stroke="black" fill="rgb(180,180,255)"/> 
</svg>  
<script>
let bb = path.getBBox()
console.log(bb)
</script>

    步骤 2. 我们将从控制台接收到的数字替换为 viewBox 参数，为了使图像不占据整个浏览器窗口，我们将viewportSVG 添加到标题 width="99.99" height="99.99"

    <svg xmlns="http://www.w3.org/2000/svg" width="99.99" height="99.99" viewbox="10 10 99.99 99.99" style="border:1px solid red">
    <path id="path" d="M60 110 A 50 50 0 1 1 60.00001 110 z"
       stroke="black" stroke-width="0.1" fill="rgb(180,180,255)"/> 
</svg>  
<script>
let bb = path.getBBox()
console.log(bb)
</script>

    SVG 图形对称地占据了整个视口空间（用户的视口），自然而然地正好位于中间。

    Step 3.如果需要放大图片，比如说10倍，那么我们用相同的参数值放大viewport10倍width="999.9" height="999.9"viewBox

    <svg xmlns="http://www.w3.org/2000/svg" width="999.9" height="999.9" viewbox="10 10 99.99 99.99" style="border:1px solid red">
    <path id="path" d="M60 110 A 50 50 0 1 1 60.00001 110 z"
       stroke="black"  fill="none"/> 
</svg>  
<script>
let bb = path.getBBox()
console.log(bb)
</script>

    请注意，在控制台输出中，形状的物理尺寸保持不变，只有自定义视口中渲染形状的大小发生了变化。

    步骤 4.如果需要，要查看形状的整个底部边框，可以通过更改 viewBox 的第二个参数来提升图像

    是：viewbox="10 10 99.99 99.99"
    变成：viewbox="10 70 99.99 99.99"

    <svg xmlns="http://www.w3.org/2000/svg" width="999.9" height="999.9" viewbox="10 70 99.99 99.99" style="border:1px solid red">
    <path id="path" d="M60 110 A 50 50 0 1 1 60.00001 110 z"
       stroke="black"  fill="none"/> 
</svg>

    对于右边框视图框="70 10 99.99 99.99"

    <svg xmlns="http://www.w3.org/2000/svg" width="999.9" height="999.9" viewbox="70 10 99.99 99.99" style="border:1px solid red">
    <path id="path" d="M60 110 A 50 50 0 1 1 60.00001 110 z"
       stroke="black"  fill="none"/> 
</svg>

    开始和结束坐标不同的换行符不太1px明显。由于 SVG 中的最小单位是 1px。使用抗锯齿效果进行渲染时，任何少的东西都会被复制。也就是说，不是清晰的间隙边界，而是灰色的矩形。

    • 2

  2. 问题出在这里：viewbox="60 109.99999 60.00002 110.00001"。60.00002我将and作为第二个参数传递110.00001，假设分别是x2and y2，并且必须指定"width"and "height"：

    viewbox="60 109.99999 0.00002 0.00002"

    我将其"z"从路径中删除，以使弧不会关闭并尝试使用正确的重复viewbox：

    <svg xmlns="http://www.w3.org/2000/svg" viewbox="60 109.99999 0.00002 0.00002">
    <path d="M60 110 A 50 50 0 1 1 60.00001 110"
       stroke="black" fill="rgb(180,180,255)"/> 
</svg>

    显然，比例很小，但是在对视图框覆盖的宽度进行了一些操作之后，我仍然在曲线中看到了明显的中断：

    <svg xmlns="http://www.w3.org/2000/svg" viewbox="59.988 109.496 0.024 0.008">
<path d="M60 110 A 50 50 0 1 1 60.00001 110"
   stroke="black" fill="rgb(180,180,255)"/> 
</svg>

    • 1

相关问题