How to nest the SVG or image within another SVG

[DinoEgo]

trafficstars

Hi, I was wondering how I would go about giving the svg or image an ID so I can reference it within another SVG, or (if possible) how I would go about putting the barcode directly into another SVG.

For example, in the code (below) I would like to replace the Blue Rectangle in this SVG with the generated barcode, weather that is in Image format or a nested SVG doesn't matter to me.

<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">Consumables Kanban</text>
  <text x="60" y="84">Part #</text>
  <text x="60" y="126">Supplier Item #</text>
  <text x="60" y="168">Description</text>
  <text x="60" y="210">Supplier</text>
  <text x="60" y="273">Shelf Location</text>
  <text x="435" y="273">Bin Quantity</text>
  <!--Details-->
  <rect x="5" y="5" width="50" height="290" fill="blue"></rect>
  <text x="241" y="84">{{itemData.Item_ID}}</text>
  <text x="241" y="126">{{itemData.Supplier_Item_Code}}</text>
  <text x="241" y="168">{{itemData.Description}}</text>
  <text x="241" y="210">{{itemData.Supplier_Name}}</text>
  <text x="200" y="273">{{itemData.Location_String}}</text>
  <text x="595" y="273">{{itemData.Bin_Count}}</text>
</svg>

Should Look like this:

Thanks

[tosehee75]

I have a same question..

<svg>
    <g>
        <svg></svg>
    </g>
</svg>

How can I do above where the inner svg is positioned within the parent at (x, y) and width and height?

I tried below and it does NOT work.

<svg class="label-container" [style.width.px]="width * pxPerInch" [style.height.px]="height * pxPerInch">
    <g *ngFor="let widget of widgets">
            <ngx-barcode
                         [bc-element-type]="svg"
                         [bc-format]="CODE128B"
                         [bc-width]="widget.width"
                         [bc-height]="100"
                         [bc-value]="widget.value" [bc-display-value]="true"></ngx-barcode>
     </g>
</svg>

[mpp]

Hi I need to do the same, the problem is that the component is generating a <div> with an <svg> inside. In order to do what we need, the selector should be [ngx-barcode] (with the []) so we can use it as attribute of an <svg:g>

<svg:g ngx-barcode></svg:g>

And the template of such component should be just the <svg:g>

detailed description

I tried to fork the code and include the component in my code but I get the error message: "jsbarcode is not a function" Do you know how can I solve it?

[mpp]

I forked this project and added a component that can be used as inside an SVG:

Please tell me if it make sense, or if there is a better way to do it. I don't like how I did it (basically copy and paste from the original).

link to my fork