使用 "symbol" 和 "use" 方法对齐 SVG 元素

Question

我在SVG symbol的帮助下创建了一个SVG图标包，以便以后可以使用它。我正在借助SVG use使用它。现在，我的问题是，有什么方法可以垂直和水平中心对齐SVG。我尝试使用position:absolute和flexbox，但没有成功。

我还玩过width，height和viewbox SVG的属性，但没有成功

.carousel-control {
  width: 30px;
  height: 30px;
  background: #fff;
  left: 0;
  top: 0;
  border-radius: 50%;
  border: 1px solid #faad40;
  text-align: center;
  display: inline-block;
  position: relative;
}
svg.icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="arrow-up" viewBox="0 0 30 30">
    <path fill-rule="evenodd"  fill="rgb(0, 0, 0)" d="M0.096,3.259 C-0.045,3.395 -0.045,3.622 0.096,3.763 C0.232,3.900 0.458,3.900 0.593,3.763 L3.141,1.205 L3.141,9.647 C3.141,9.844 3.297,10.000 3.493,10.000 C3.689,10.000 3.849,9.844 3.849,9.647 L3.849,1.205 L6.392,3.763 C6.533,3.900 6.759,3.900 6.895,3.763 C7.035,3.622 7.035,3.395 6.895,3.259 L3.744,0.095 C3.608,-0.046 3.382,-0.046 3.247,0.095 L0.096,3.259 Z"/>
  </symbol>
  <symbol id="arrow-down" viewBox="0 0 30 30">
    <path fill-rule="evenodd"  fill="rgb(0, 0, 0)" d="M6.873,6.720 C7.013,6.584 7.013,6.358 6.873,6.217 C6.738,6.081 6.513,6.081 6.378,6.217 L3.842,8.767 L3.842,0.352 C3.842,0.156 3.687,-0.000 3.492,-0.000 C3.296,-0.000 3.136,0.156 3.136,0.352 L3.136,8.767 L0.605,6.217 C0.465,6.081 0.240,6.081 0.105,6.217 C-0.035,6.358 -0.035,6.584 0.105,6.720 L3.241,9.874 C3.377,10.014 3.602,10.014 3.736,9.874 L6.873,6.720 Z"/>
  </symbol>
</svg>
<a class="left carousel-control"><svg class="icon" width="30px" height="30px;"><use xlink:href="#arrow-up" /></svg></a>
<a class="left carousel-control"><svg class="icon" width="30px" height="30px;"><use xlink:href="#arrow-up" /></svg></a>

Answer 1

您需要减少ViewBox 才能覆盖图标形状。实际上，它设置为30，而SVG的宽度/高度为30px(与容器相同(，因此将其居中，但SVG内部的路径却不是。

然后，您可以指定图标的任何维度，而不一定与ViewBox相同：

.carousel-control {
  width: 30px;
  height: 30px;
  background: #fff;
  border-radius: 50%;
  border: 1px solid #faad40;
  display: inline-flex;
  vertical-align:top;
  align-items:center;
  justify-content:center;
  position: relative;
}

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="arrow-up" viewBox="0 0 8 10">
    <path fill-rule="evenodd"  fill="rgb(0, 0, 0)" d="M0.096,3.259 C-0.045,3.395 -0.045,3.622 0.096,3.763 C0.232,3.900 0.458,3.900 0.593,3.763 L3.141,1.205 L3.141,9.647 C3.141,9.844 3.297,10.000 3.493,10.000 C3.689,10.000 3.849,9.844 3.849,9.647 L3.849,1.205 L6.392,3.763 C6.533,3.900 6.759,3.900 6.895,3.763 C7.035,3.622 7.035,3.395 6.895,3.259 L3.744,0.095 C3.608,-0.046 3.382,-0.046 3.247,0.095 L0.096,3.259 Z"/>
  </symbol>
  <symbol id="arrow-down" viewBox="0 0 8 10">
    <path fill-rule="evenodd"  fill="rgb(0, 0, 0)" d="M6.873,6.720 C7.013,6.584 7.013,6.358 6.873,6.217 C6.738,6.081 6.513,6.081 6.378,6.217 L3.842,8.767 L3.842,0.352 C3.842,0.156 3.687,-0.000 3.492,-0.000 C3.296,-0.000 3.136,0.156 3.136,0.352 L3.136,8.767 L0.605,6.217 C0.465,6.081 0.240,6.081 0.105,6.217 C-0.035,6.358 -0.035,6.584 0.105,6.720 L3.241,9.874 C3.377,10.014 3.602,10.014 3.736,9.874 L6.873,6.720 Z"/>
  </symbol>
</svg>
<a class="left carousel-control"><svg class="icon" width="6"><use xlink:href="#arrow-up" /></svg></a>
<a class="left carousel-control"><svg class="icon" width="12" ><use xlink:href="#arrow-down" /></svg></a>