Angular 在SVG 5中生成条形码

正如标题所述，我正在尝试将条形码放入SVG中，但在使用Angular 5时遇到了问题

我正在使用生成条形码，并创建了一个SVG将条形码放入其中。但是，我不知道如何将条形码放入SVG中。任何想法/建议都是非常受欢迎的，因为我没有任何想法

NGX条形码生成如下条形码：

<ngx-barcode _ngcontent-c18="" bc-element-type="svg" bc-height="30" bc-width="1" class="rotate" ng-reflect-element-type="svg" ng-reflect-width="1" ng-reflect-height="30" ng-reflect-value="KB1">
  <div class="barcode">
    <svg width="88px" height="50px" x="0px" y="0px" viewBox="0 0 88 50" xmlns="http://www.w3.org/2000/svg" version="1.1" style="transform: translate(0,0)">
      <rect x="0" y="0" width="88" height="50" style="fill:#ffffff;"></rect>
      <g transform="translate(10, 10)" style="fill:#000000;">
        <rect x="0" y="0" width="2" height="30"></rect>
        <rect x="3" y="0" width="1" height="30"></rect>
        <rect x="6" y="0" width="1" height="30"></rect>
        <rect x="11" y="0" width="1" height="30"></rect>
        <rect x="13" y="0" width="2" height="30"></rect>
        <rect x="18" y="0" width="3" height="30"></rect>
        <rect x="22" y="0" width="1" height="30"></rect>
        <rect x="26" y="0" width="1" height="30"></rect> 
        <rect x="28" y="0" width="2" height="30"></rect>
        <rect x="33" y="0" width="1" height="30"></rect>
        <rect x="36" y="0" width="3" height="30"></rect>
        <rect x="41" y="0" width="2" height="30"></rect>
        <rect x="44" y="0" width="3" height="30"></rect>
        <rect x="48" y="0" width="4" height="30"></rect>
        <rect x="53" y="0" width="1" height="30"></rect>
        <rect x="55" y="0" width="2" height="30"></rect>
        <rect x="60" y="0" width="3" height="30"></rect>
        <rect x="64" y="0" width="1" height="30"></rect>
        <rect x="66" y="0" width="2" height="30"></rect>
      </g>
    </svg>
  </div>
</ngx-barcode>

然后像这样生成我的SVG（用条形码代替蓝色矩形）：

消耗品看板
部分#
供应商项目#
描述
供应商
货架位置
料仓数量
{{itemData.Item_ID}
{{itemData.Supplier_Item_Code}
{{itemData.Description}
{{itemData.Supplier_Name}
{{itemData.Location_String}
{{itemData.Bin_Count}}

---

谢谢。

我想您希望条形码旋转90°

您只需进行两次变换即可旋转和缩放条形码

消耗品看板
部分#
供应商项目#
描述
供应商
货架位置
料仓数量
{{itemData.Item_ID}
{{itemData.Supplier_Item_Code}
{{itemData.Description}
{{itemData.Supplier_Name}
{{itemData.Location_String}
{{itemData.Bin_Count}}

谢谢您的回答，但是我认为您还没有理解我的问题。并不是我在努力旋转SVG，而是我无法使用

模块将生成的SVG插入到我创建的SVG中

<svg viewBox="0 0 675 315">
  <line x1="0" y1="0" x2="595" y2="0" style="stroke:rgb(0,0,0);stroke-width:2"></line>
  <line x1="595" y1="0" x2="675" y2="84" style="stroke:rgb(0,0,0);stroke-width:2"></line>
  <line x1="675" y1="84" x2="675" y2="300" style="stroke:rgb(0,0,0);stroke-width:2"></line>
  <line x1="675" y1="300" x2="0" y2="300" style="stroke:rgb(0,0,0);stroke-width:2"></line>
  <line x1="0" y1="0" x2="0" y2="300" style="stroke:rgb(0,0,0);stroke-width:2"></line>
  <!--Labels-->
  <text x="180" y="40" style="fill:black; font-size: 24pt; font-weight:bold;">Consumables Kanban</text>
  <text x="60" y="84" style="fill:black; font-size: 12pt;">Part #</text>
  <text x="60" y="126" style="fill:black; font-size: 12pt;">Supplier Item #</text>
  <text x="60" y="168" style="fill:black; font-size: 12pt;">Description</text>
  <text x="60" y="210" style="fill:black; font-size: 12pt;">Supplier</text>
  <text x="60" y="273" style="fill:black; font-size: 12pt;">Shelf Location</text>
  <text x="435" y="273" style="fill:black; font-size: 12pt;">Bin Quantity</text>
  <!--Details-->
  <rect x="5" y="5" width="50" height="290" fill="blue"></rect>
  <text x="241" y="84" style="fill:black; font-size: 12pt; font-weight:bold;">{{itemData.Item_ID}}</text>
  <text x="241" y="126" style="fill:black; font-size: 12pt; font-weight:bold;">{{itemData.Supplier_Item_Code}}</text>
  <text x="241" y="168" style="fill:black; font-size: 12pt; font-weight:bold;">{{itemData.Description}}</text>
  <text x="241" y="210" style="fill:black; font-size: 12pt; font-weight:bold;">{{itemData.Supplier_Name}}</text>
  <text x="200" y="273" style="fill:black; font-size: 12pt; font-weight:bold;">{{itemData.Location_String}}</text>
  <text x="595" y="273" style="fill:black; font-size: 12pt; font-weight:bold;">{{itemData.Bin_Count}}</text>
</svg>