Question

AngularJS应用。

基本上，我必须制作水平箭头状的图形，并根据要发送到html（ng-repeat）的项目数组在内部重复这些图像。

我被告知最好的是svg，所以我在这里，但是我对svg的了解很少。因此我设法用固定的witdh和高度制作了一个小箭头。但是现在我需要更大了。

所以我在线阅读了有关viewBox的信息。它可以缩放我在SVG中拥有的项目，但是到目前为止，我有两个问题。

图像不起作用。
所有物品都堆放了，没有按照我之前的空间放置。

此代码是我现在拥有的有效代码，因此您对我要绘制的元素有所了解。我使用该元素，因此可以在工具提示和文本内进行ng-repeat重复，此代码得以简化。

.container {
    display: flex;
}

.justaclass {
    fill: #9b3d9c;
    background-color: #9b3d9c;
}

.justaclass-group {
    display: inline-block;
    position: relative;
}


.justaclass-image {
    padding: 2px;
}

<div class="container">
  <svg width="8" height="34">
      <path class="justaclass"
            d="M 0 0 L 7 17 L 0 34 L 17 34 L 17 0 z">
      </path>
  </svg>
  <svg width="33" height="34" class="justaclass justaclass-image">
  
      <image x="0" y="3" width="33" height="25" href="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg"></image>
      
  </svg>
  <div class="justaclass-group">
  
      <svg width="50" height="34" class="justaclass image">
           
          <image width="45" height="30"
                 x="0" y="0"
                 href="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg">
          </image>
          
      </svg>

  <svg width="10" height="34">
      <path class="justaclass"
            d="M 0 0 L 0 34 L 10 17 z">
      </path>
  </svg>
</div>

代码在这里并不是完美的像素，但这不是我的主要问题。

现在，我尝试使用viewBox使其变大，我可以绘制4个元素，但它们放错了位置。因此，如果我添加 display：flex 或 display：table ，我完全无法使元素水平对齐，这些元素就会消失。

任何人都知道如何动态调整所有这些元素的大小，以及像display flex一样将它们全部放在同一行吗？

我第一次尝试使用viewBox制作上述图片 但是，如果我将display：flex添加到容器中，则svg消失了，我只能看到图像。

.container {}

.justaclass {
    fill: #9b3d9c;
    background-color: #9b3d9c;
}

<div class="container">

    <svg viewBox="0 0 150 50">
        <path class="justaclass"
              d="M 0 0 L 7 17 L 0 34 L 17 34 L 17 0 z">
        </path>
    </svg>

    <svg viewBox="0 0 150 50">
        <image width="150" height="50" href="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg"></image>
    </svg>

    <svg viewBox="0 0 150 50">
        <image width="150" height="50" href="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg"></image>
    </svg>

    <svg viewBox="0 0 150 50">
        <path class="justaclass"
              d="M 0 0 L 0 34 L 10 17 z">
        </path>
    </svg>

</div>

Answer 1

这里有很多事情需要改变。首先让我们谈谈viewBox。此属性描述<svg>标签中的数字内部与那些外部的关系。它提供了一个矩形，内部内容呈现在其中。然后，缩放此矩形，使其适合width和height给定的大小。这意味着，在没有定义viewBox和width的情况下给出height也没有多大意义，因为缺少内容应按缩放为的大小。

如果viewBox的纵横比与宽度和高度的纵横比不匹配怎么办？默认情况下，内容设置在中间并缩放以使其恰好适合。可以使用preserveAspectRatio属性来指定其他值。例如，要将左侧的“箭头”部分移至其矩形的右侧（因此不留间隙），请设置preserveAspectRatio="xMaxYMid meet"。

可以将

width和height用作SVG内容的属性或CSS属性。如果要更改它们，将它们定义为样式是很有意义的。

您链接的图像不需要具体大小。给它们width="100%" height="100%"会将它们缩放到包含SVG元素，而不会扭曲它们（除非您使用preserveAspectRatio="none"进行定义。

.container {
    display: flex;
}

.container svg {
    width: 50px;
    height: 50px;
}

.container .justaclass {
    fill: #9b3d9c;
    background-color: #9b3d9c;
    width: 150px;
}

<div class="container">

    <svg width="50" height="50" viewBox="0 0 8 34" preserveAspectRatio="xMaxYMid meet">
        <path
              d="M 0 0 L 7 17 L 0 34 L 17 34 L 17 0 z">
        </path>
    </svg>

    <svg class="justaclass">
        <image width="100%" height="100%" href="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg"></image>
    </svg>

    <svg class="justaclass">
        <image width="100%" height="100%" href="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg"></image>
    </svg>

    <svg viewBox="0 0 10 34" preserveAspectRatio="xMinYMid meet">
        <path
              d="M 0 0 L 0 34 L 10 17 z">
        </path>
    </svg>

</div>

动态生成带有图像的SVG？

1 个答案: