Question

我已经开始使用SVG进行工具开发，因为它看起来确实很有前途。

但是，我不太了解如何对齐元素。我目前正在尝试制作一个带有大标题的示例页面，该页面贴在网页的左侧并垂直居中。

我已经设置了一些内容，但是当页面的宽度改变时，SVG会移到页面的左侧，而不仅仅是停留在页面的左侧（下图）。

我想知道如何解决此问题，以及为什么SVG会做到这一点。我已经将视图框和文本元素的X值设置为x="0"，我想可以解决该问题。我对SVG不太了解，因此请原谅我的新错误。

这是我在MCVE中的代码。

<html>
    <header>
        <style>
        /* Visual styling, adds color, font, etc. ----------- */
        body{
          background-color: #121212;
          font-family: "Segoe UI";
        }
        /* Actual structured styling, grid, margin, etc. -------- */
        svg{
          width: 100%;
          height: 100%;
        }
        #mainTitle{
          font-weight: 200;
          font-size: 20px;
          letter-spacing: 2px;
          fill: #d8d8d8;
        }
        </style>
    </header>
    <body>
        <svg viewbox = "0 0 200 200">
            <text x = "0" y = "100" id="mainTitle" text-anchor="middle"> Sample Text </text>
        </svg>
    </body>
</html>

如果您知道关于SVG的任何良好的学习资源（不是W3），请随时也删除链接。

感谢您的帮助！

Answer 1

将文本居中对齐并设置x = 0意味着文本的中心将与屏幕的左侧对齐，并且其中一半将被切除。

尝试以下方法：

<text x = "50%" y = "20" id="mainTitle" text-anchor="middle"> Sample Text </text>

请注意，我已使用x =“ 50％”和text-anchor =“ middle”。这可以看作是一个工作示例：https://jsfiddle.net/bov53wz8/4/。注意，我还设置了y =“ 20”，以使标题看起来更靠近顶部，但是您可以根据需要进行更改。

我通常喜欢去的网站上的一个很好的教程是：https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial 另外，在将SVG用于网页设计时，也是一个很好的参考：https://css-tricks.com/using-svg/

将SVG元素与页面的左侧对齐

1 个答案: