How do you enable transparency on an aframe entity that is composed of an SVG/HTML?

Question

I'm having trouble getting an SVG properly rendered into aframe's scene. I went the htmltexture-component route, which has a dependency on the draw-component.

The problem is in getting the SVG's background to render as transparent. It simply is not working. Instead I'm given a default white background drawn on the canvas. My SVG was created in Illustrator and is a valid HTML object with no background (as a color or a raster image).

<div id="bears">
<svg xmlns="http://www.w3.org/2000/svg" width="518" height="500" xmlns:xlink="http://www.w3.org/1999/xlink">
  <path d="M168.958 480.023c-12.18-1.57-24.62-6.847-34.293-14.544-9.103-7.25-11.733-15.34-7.8-23.99 4.594-10.11 22.386-19.1 27.564-13.92 1.71 1.71 2.03 5.14.68 7.27-.63.99-1.03.66-1.51-1.25-1.37-5.43-13.5-2.54-16.44 3.92-2.72 5.95-.57 14.06 4.3 16.28 5.39 2.45 15.09 1.04 23.89-3.49 3.63-1.87 13.35-9.11 19.14-14.25 12.62-11.23 19.38-16.07 28.49-20.42 5.93-2.84 7.37-3.11 16.5-3.11 8.3 0 10.88.39 15.18 2.32 2.84 1.27 5.95 3.17 6.9 4.22 2.05 2.26 3.74 2.42 5.34.5 2.24-2.71 11.83-6.6 17.78-7.23 6.83-.72 17.37.833 22.4 3.3 3.87 1.892 14 8.59 17.72 11.72 1.38 1.155 6.14 5.31 10.59 9.225 14.51 12.8 25.37 18.42 35.56 18.42 4.85 0 9.52-2.153 11.11-5.117 1.75-3.28 1.46-10.15-.56-13.24-1.83-2.793-7.96-6.428-10.258-6.08-.682.102-2.15.243-3.25.312-1.55.097-2 .845-2.03 3.375-.03 3.073-.11 3.144-1.5 1.31-3.32-4.39-.46-9.56 5.28-9.56 7.277 0 18.478 7.596 22.327 15.14 2.34 4.59 2.48 10.893.34 15.403-3.748 7.9-16.18 16.29-31.223 21.08-13.8 4.39-45.63 4.12-65.69-.56-11.47-2.67-21.36-7.31-27.05-12.67-3.21-3.02-6.45-3.65-6.45-1.26 0 .51-2.65 2.63-5.88 4.72-10.35 6.7-24.14 10.68-42.05 12.17-12.99 1.08-26.83 1.08-35.11.02zM374.5 360.566c-7.77-1.094-14.833-3.225-33.893-10.225-2.14-.78-9.34-4.27-16-7.75-14.11-7.37-19.35-9.6-29.607-12.57-12.336-3.57-13.295-3.8-18.5-4.48-8.943-1.16-8.8-.78-6.03-16.03.2-1.1.4-3.03.447-4.3.08-2.21.308-2.27 6.333-1.66 6.334.65 20.588 3.89 24.25 5.51 1.1.49 4.505 1.97 7.567 3.29 3.06 1.32 7.894 4.04 10.74 6.04 2.845 2 5.515 3.64 5.933 3.64.418 0 1.99 1.02 3.49 2.25 4.238 3.49 7.614 5.83 16.27 11.27 7.074 4.45 9.82 5.9 18 9.5 4.746 2.1 11.452 3.81 17.5 4.48 3.575.4 7.85.88 9.5 1.08 3.93.47 14.805-2.08 18.27-4.28 7.812-4.96 12.43-11.71 14.7-21.49 2.514-10.84-.142-21.28-6.64-26.082-5.234-3.87-16.747-1.88-24.316 4.2-1.093.88-.412-.367 1.512-2.76 8.517-10.61 20.494-11.775 30.528-2.965 7.336 6.44 10.342 17.7 7.88 29.525-1.44 6.92-6.636 18.58-9.84 22.07-10.297 11.237-25.51 14.96-48.094 11.78zm-262-2.216c-6.116-.74-13.637-3.196-17-5.55-5.537-3.875-9.688-8.793-13.294-15.754-9.527-18.388-7.015-35.84 6.445-44.778 8.89-5.902 16.55-4.74 25.97 3.944 2.41 2.224 4.38 4.548 4.37 5.165-.01.818-.21.822-.75.014-1.13-1.7-10.33-6.31-13.97-7-15.47-2.9-24.2 15.75-15.88 33.94 8 17.5 25.7 23.2 50.15 16.16 11.14-3.2 19.74-7.56 34.28-17.36 6.22-4.19 12.07-8.07 13-8.61.93-.55 3.04-1.93 4.69-3.08 8.9-6.17 22.62-11.34 35.5-13.39 4.13-.65 8.51-1.35 9.74-1.54 1.23-.19 2.52.11 2.87.68.35.56 1.16 5.43 1.81 10.82l1.17 9.8-5.03.6c-5.65.666-19.46 3.85-27.04 6.237-2.75.864-13.55 5.76-24 10.884-22.3 10.93-26.66 12.68-40 16.04-9.48 2.39-25.33 3.744-33 2.82zM174 237.527c-23.41-4.077-43.362-18.19-56.588-40.027-2.58-4.258-7.44-15.748-8.04-19-1.02-5.543-2.358-14.3-2.364-15.487-.004-.817 1.522.758 3.39 3.5 8.792 12.897 18.184 18.825 30.354 19.16 12.067.332 14.908-1.168 29.013-15.317C181.473 158.612 195.32 148 198.94 148c.912 0 2.224-.563 2.912-1.25.898-.896 5.704-1.244 16.95-1.23 15.634.02 15.722.033 21.698 3.156 9.06 4.735 14.04 8.73 19.248 15.436 4.637 5.97 4.75 6.04 6.237 3.94 2.74-3.865 12.845-14.052 13.94-14.052.592 0 1.078-.338 1.08-.75.012-1.222 6.068-4.334 12.393-6.366 8.55-2.747 24.897-2.706 33.558.084 3.55 1.144 6.7 2.407 7 2.806.3.4 2.138 1.534 4.086 2.522 5.085 2.577 11.184 7.778 21.458 18.298 11.824 12.107 15.94 14.606 25.015 15.19 9.73.623 17.925-2.324 26.59-9.563 1.888-1.57 7.062-8.87 9.733-13.72 1.95-3.54 1.386 5.22-.938 14.56-1.925 7.74-6.9 19.74-9.38 22.63-.56.66-2.145 2.88-3.52 4.95-3.75 5.63-14.84 16.58-20.5 20.25-12.477 8.08-26.436 12.77-40.5 13.6-8.476.5-23.706-.84-27.5-2.43-1.1-.46-4.025-1.38-6.5-2.04-2.475-.66-6.876-2.29-9.78-3.61-2.903-1.32-5.483-2.4-5.732-2.4-1.02 0-13.642-8.13-19.31-12.44-3.345-2.54-7.576-6.37-9.402-8.5l-3.32-3.88-3.18 3.79C257.95 210.93 243.87 222 242.16 222c-.545 0-1.14.395-1.325.878-.183.483-3.933 2.68-8.333 4.882-19.038 9.526-39.892 13.008-58.5 9.767zm-1.594-159.52c-8.636-.944-14.453-3.438-20.44-8.763-11.826-10.52-14.99-29.243-7.322-43.33 3.49-6.416 8.05-10.408 16.31-14.276 5.78-2.71 7.6-3.07 15.546-3.075 7.427-.006 9.75.388 13.29 2.255 5.43 2.866 8.203 7.32 8.203 13.182 0 7.234-4.917 13.106-12.993 15.52-2.437.727-2.455.695-.72-1.25.98-1.097 2.212-3.5 2.74-5.34.846-2.948.645-3.67-1.696-6.113-8.034-8.386-20.356-4.395-23.882 7.736-2.124 7.304-1.174 11.553 3.535 15.807 4.824 4.358 9.81 5.97 16.88 5.453 8.677-.634 14.04-3.842 18.92-11.315 9.25-14.173 24.976-20.235 45.804-17.66 4.91.608 10.27 1.42 11.92 1.806 3.86.903 7.14.91 11.5.026 24.76-5.018 44.31-1.46 53.48 9.733 1.94 2.367 3.53 4.804 3.53 5.417 0 2.032 7.18 8.325 11.71 10.267 9 3.856 21.6 1.406 26.5-5.15 8.07-10.805-3.26-29.497-15.79-26.04-7.94 2.195-10.78 8.818-6.24 14.59l2.17 2.754-2.42-.72c-3.86-1.15-8.41-4.57-10.88-8.17-1.85-2.71-2.19-4.27-1.81-8.28.98-10.11 7.12-14.39 20.78-14.46 15.78-.08 27.03 6.4 33.66 19.41 2.46 4.83 2.8 6.61 2.8 14.5 0 11.84-3.12 19.13-11.48 26.87-7.8 7.22-14 9.01-30.97 8.92-25.37-.13-75.41-11.67-79.54-18.34-.44-.72-1.4-.42-2.81.88-6.42 5.89-50.5 16.3-74.15 17.51-4.95.26-12.19.11-16.09-.31z"/>
</svg>
</div>

The SVG is held within <a-assets></a-assets> along with other assets.

The entity's code looks like this:

<a-entity geometry="primitive: plane" position="10 4 -4" scale="4 4 0" draw="width: 512; height: 512;" htmltexture="asset: #bears">
</a-entity>

The rendered plane holding the SVG texture ends up having a white background. I tried changing the material transparency property, but that didn't work. I also tried changing the draw background property, seeing as how aframe-htmltexture-component has a dependency on aframe-draw-component which creates a canvas element to draw to, but again no luck.

Anyone know a fix for this, or have a better way at rendering HTML (SVG) as an aframe entity?

Answer 1

Did you try transparent="true" ? I had similar issues with importing PNGs with transparency, and then discovered setting transparent="true" fixed it.

<a-plane position="0 0.01 0" rotation="-90 0 0" height="7" width="7"
    src           ="#metatron-gates-platform"
    transparent   ="true">
</a-plane>

Answer 2

I ran into this as well. Try changing the order of the svg entities. Because it is a 3d environment it renders farthest from the camera first, so place those entities first in your code.

Answer 3

Try material.opacity:

<a-entity
    geometry="primitive: plane"
    position="10 4 -4"
    scale="4 4 0"
    draw="width: 512; height: 512;"
    htmltexture="asset: #bears"
    material="opacity: 0.0; transparent: true">
</a-entity>

Edit: Transparent must be set to true too.