Question

我想编写我的第一个SVG图并将其嵌入HTML中。如果我调整HTML容器的大小以适应硬编码的SVG大小，这很容易 - 否则会发生不好的事情：

＆＃13;

figure {
  background-color: gray;
  padding: 10px;
  width: 250px;
  height: 100px;
}
figure svg {
  background-color: pink;
}
figure svg circle {
  fill: salmon;
}
figure svg text {
  fill: yellow;
}

＆＃13;

<figure>
  <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"
    width="50mm" height="50mm"
  >
    <circle cx="25mm" cy="25mm" r="25mm" />
    <text x="25mm" y="33mm" font-size="25mm" text-anchor="middle">SVG</text>
  </svg>
</figure>

<figure>Hello, World!</figure>

＆＃13;

可扩展性是该格式的杀手级功能，但我无法使其工作甚至了解其工作原理。我完全混淆了视口，坐标，大小，用户单元的基本概念......以及我读过的文章没有帮助（很多人建议你甚至需要CSS黑客攻击）。

是否可以修复我的代码，以便<svn>项自动扩展或缩小以适应他们所包含的<figure>的尺寸？或者我是否需要使用JavaScript动态更改width和height？

Answer 1

就像任何其他HTML / CSS问题的情况一样，如果你想要一个孩子适合它的父，你必须使用相对单位。

在SVG内联样式中，宽度设置为mm，这是绝对单位。相反，请使用百分比或vw / vh单位等相对单位。

在下面的示例中，我将svg内联设置为width="100%" height="100%". Then, in the CSS for your数字, set its width and height. I picked 50vw`，因为SVG应该是正方形。

在<circle>的{{1}}部分，我们将其svg和cx值设置为cy，使其居中于50% 。根据定义，它的半径自然是svg的宽度，所以我们继续设置50%。

我以r="50%"的百分比为中心，然后使用<text>的相对单位，因此当font-size更改大小时，文字会向上或向下缩放。

尝试使用以下代码段全屏调整浏览器窗口的大小，以查看其运行情况。还可以尝试更改容器图形的宽度和高度值，以查看它对SVG的影响。

请注意，我继续为该图指定了一个带有SVG的ID，这样第二个数字就不会受到影响。

svg

figure {
  background-color: gray;
  padding: 10px;
}
#svg-container {
  width: 50vw;
  height: 50vw;
}
figure svg {
  background-color: pink;
}
figure svg circle {
  fill: salmon;
}
figure svg text {
  fill: yellow;
  
}

使嵌入式SVG比例适合父容器

1 个答案: