主页 / 问题 / 1405701
Accepted
Дмитрий Варзанов
Asked:2022-07-02 03:02:59 +0800 CST2022-07-02 03:02:59 +0800 CST

Inkscape - 按 x 和 y 布局

  • 772

在此处输入图像描述

怎么可能使它在 x 中在 y 中。计数是从零开始的吗？

我试图用这些线条在中心制作一个均匀的圆圈，依此类推。是嚼...

是否可以不设置 Viewbox？不管有没有他更好，我不太明白他的角色……

svg inkscape

1 个回答

  1. Best Answer

    是否可以不设置 Viewbox？不管有没有他更好，我不太明白他的角色……

    viewBox设置 SVG 画布的物理尺寸并在缩放方面发挥重要作用，没有它就不可能实现响应式 SVG 图像。

    假设您决定创建一个图标48x48px。为此，请指定viewBox="0 0 48 48"
    第二个任务：从 SVG 画布的边缘进行最小缩进

    在此处输入图像描述

    (0,0)由于圆的中心坐标位于 svg 画布的中心，因此它将锚定到svg 画布的左上角

    更改宽度和高度只会更改显示的 size width，height但与左上角的绑定仍然存在。

    <svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="48" height="48" viewBox="0 0 48 48" style="border:1px solid;">  
<circle cx="24" cy="24" r="24" fill="red" />
</svg>  

<svg width="96" height="96" viewBox="0 0 48 48" style="border:1px solid;">  
<circle cx="24" cy="24" r="24" fill="red" />
</svg>     

<svg width="144" height="144" viewBox="0 0 48 48" style="border:1px solid;">  
<circle cx="24" cy="24" r="24" fill="red"/>
</svg>

    更新

    评论中的澄清：

    深色边框显示渲染的 SVG 画布的边界style="border:1px solid;"

    这三个图标具有不同的自定义视口大小width:"48"： width:"96"; width:"144"但给出的物理尺寸 viewBox="0 0 48 48"保持不变——48px

    <svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="48" height="48" viewBox="0 0 48 48" style="border:1px solid;">  
<circle id="circ1" cx="24" cy="24" r="24" fill="red" />
</svg>  

<svg width="96" height="96" viewBox="0 0 48 48" style="border:1px solid;">  
<circle id="circ2" cx="24" cy="24" r="24" fill="red" />
</svg>     

<svg width="144" height="144" viewBox="0 0 48 48" style="border:1px solid;">  
<circle id="circ3" cx="24" cy="24" r="24" fill="red"/>
</svg>

<script>
console.log(circ1.getBBox())
console.log(circ2.getBBox())
console.log(circ3.getBBox())
</script>

    • 1

相关问题