REVISION of the topic: Just in case somebody comes here with the same issue. I found a safer solution: The reason for persisting to work on this is that the Uncought DOMExeption didn't go away in Firefox. After some research on the Web it turns out that this error is almost always related to HTML documents which utilize the <canvas> element. Further always when some properties within the <canvas> are set to zero. Like width, height or probably also opacity. And Captivate's VR is happening in a <canvas>. So going back to the drawing board I thought about that an SVG graphic is mainly a XML (-script). My guess was that I could try to change something in the assessmenthotspotvisited.svg SVG-XML script to achieve invisibility. I opened the file in an editor (like Brackets or Notepad) and made the following changes resp. additions: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64" viewBox="0 0 24 24">
<defs>
<circle id="assessment-hotspot-visited-b" cx="11" cy="11" r="9"/>
<filter id="assessment-hotspot-visited-a" width="144.4%" height="144.4%" x="-22.2%" y="-22.2%" filterUnits="objectBoundingBox">
<feMorphology in="SourceAlpha" operator="dilate" radius="1" result="shadowSpreadOuter1"/>
<feOffset in="shadowSpreadOuter1" result="shadowOffsetOuter1"/>
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1"/>
<feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
<feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"/>
</filter>
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(1 1)">
<rect width="64" height="64" fill="#FF13DC" fill-rule="nonzero" opacity="0"/>
<use fill="#000" filter="url(#assessment-hotspot-visited-a)" xlink:href="#assessment-hotspot-visited-b"/>
<circle cx="11" cy="11" r="9.5" fill="#3DA64F" stroke="#90EA42" opacity="0"/>
<path fill="#FFF" opacity="0" d="M16.6983932,7.4432308 L10.1603932,15.4862308 C10.0710846,15.5961916 9.93932373,15.6631081 9.79784964,15.6703534 C9.65637555,15.6775987 9.51846802,15.6244927 9.41839323,15.5242308 L5.14639323,11.3342308 C4.95120226,11.1389809 4.95120226,10.8224807 5.14639323,10.6272308 L5.85339323,9.9202308 C6.04864315,9.72503983 6.3651433,9.72503983 6.56039323,9.9202308 L9.66039323,12.9342308 L15.1463932,6.1832308 C15.3201942,5.9709935 15.6325415,5.93842014 15.8463932,6.1102308 L16.6223932,6.7412308 C16.8368603,6.9142991 16.8708517,7.22827312 16.6983932,7.4432308 Z"/>
</g>
</svg> Well, line numbers would be helpful, but I try my best to explain: In the line which starts with <feColorMatrix in="shadowBlurOuter1" values="... I changed the fourth 0-series in the fourth position from 0.5 to 0. This relates to the dark shadow outline of the checkmark/tick. In the line which starts with <circle cx="11" ... I added opacity="0". This relates to the green circle with the bright green outline. In the line starting with <path fill="#FFF" ... I too added opacity="0". This is the white tick of the checkmark. With this it works perfectly. Regarding the remaining assessmenthotspotvisited.png assessmenthotspotvisited@2x.png I guess they will work when you just make them completely transparent in i.e. Photoshop. For the desktop version of Captivate VR it's the SVG which really matters. Klaus
... View more