如何使用自动宽度缩放已使用的 svg？

问题描述 投票：0回答：1
html svg responsive-design
1个回答
0
投票

302px 的宽度是 300px + 2*1px 边框宽度的 SVG 的标准宽度。您需要为 HTML 中的 SVG 元素指定适合符号长宽比的宽度和高度，或者为其指定与符号的 viewBox 匹配的 viewBox 属性。这里我使用viewBox：

<!DOCTYPE html>
<html>

<head>
  <style>
    .logo {
      color: #f0f;
      border: 1px solid #0f0;
      height: 1em;
      width: auto;
    }
  </style>
</head>

<body>
  <svg class="logo" viewBox="0 0 40 20">
    <use xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiID8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8c3ltYm9sIGlkPSJ0ZXN0IiB2aWV3Qm94PSIwIDAgNDAgMjAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWluIG1lZXQiPgogICAgPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjIwIiBmaWxsPSJjdXJyZW50Q29sb3IiIC8+CiAgPC9zeW1ib2w+Cjwvc3ZnPg==#test" x="0" y="0" />
  </svg>
</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.