Remove the host HTML element selectors created by angular component

by

Instead of trying to get rid of the host element, turn it into one that is valid SVG but other wise unaffecting: Instead of your element selector

selector: "svg-rect"

and its corresponding element in the template:

template: `...<svg-rect>...</svg-rect>...`

switch to an attribute selector:

selector: "[svg-rect]"

and add that attribute to a group element tag:

template: `...<g svg-rect>...</g>...`

This will expand to:

<svg height="550" width="450" x="0" y="0">
    <g id="svgGroup">
        <g svg-rect>
        <!--template bindings={}-->
            <rect x="10" y="10" height="100" width="100" fill="red" stroke="#000" stroke-width="2"></rect>
        <!--template bindings={}-->
        </g>
        <g svg-rect>
        <!--template bindings={}-->
            <rect x="10" y="10" height="100" width="100" fill="red" stroke="#000" stroke-width="2"></rect>
        <!--template bindings={}-->
        </g>
    </g>
</svg>

which is valid SVG, which will render.
Plnkr

More Related Contents:

  1. svg text wrapping issues
  2. How to calculate the SVG Path for an arc (of a circle)
  3. Circle drawing with SVG’s arc path
  4. Can you control how an SVG’s stroke-width is drawn?
  5. How to convert a PNG image to a SVG? [closed]
  6. Removing transforms in SVG files
  7. How to use the viewBox attribute?
  8. How many levels of recursion does SVG support?
  9. SVG Line with Gradient Stroke Won’t Display if vertical or horizontal
  10. Add custom icons to font awesome
  11. semantic zooming of the force directed graph in d3
  12. Catmull-Rom interpolation on SVG Paths
  13. Default background color of SVG root element
  14. How to convert/save d3.js graph to pdf/jpeg
  15. Scale and mirror SVG object
  16. How to convert a SVG to a PNG with ImageMagick?
  17. vertical alignment of text element in SVG
  18. SVG shadow cut off
  19. Crop to fit an svg pattern
  20. Do SVG docs support custom data- attributes?
  21. SVG angular gradient
  22. Avoiding lines between adjecent svg rectangles
  23. Can I apply a gradient along an SVG path?
  24. Adding feDropShadow to a vertical line in SVG makes it disappear
  25. SVG Image in JavaFX 2.2
  26. Converting an svg arc to lines
  27. Simple fill pattern in svg : diagonal hatching
  28. Why can’t I reference an SVG linear gradient defined in an external file (paint server)?
  29. is it possible to make SVG circle fill color from bottom to top based on percentage? [duplicate]
  30. Convert SVG polygon to path

Leave a Comment