Surprisingly, it’s not an Anki thing. CSS stylesheets are supposed to take precedence over inline svg attributes. I would never have guessed. In that case, using inline/styling tab CSS is indeed the better way to go.
Just to be clear, that one in itself could easily be solved by setting the appropriate max-width as a style for the button.
I tried this code in Anki myself, and it reproduced the blank page issue. Not sure why it does this, as even a trivial replacement document.body.innerHTML = document.body.innerHTML; causes whole page to disappear (despite all elements remaining where they are if inspected with dev tools).
Anyway, I was able to avoid it by wrapping the code in a timeout function:
<script>
setTimeout(()=>{
const pattern = /\x5Bsound-muted:(.*?)\x5D/g;
function audioHTML(filename) {
return `<audio id="muted_audio${filename}"><source src="${filename}"></audio>`;
}
function buttonHTML(filename) {
return `<a class="replay-button soundLink muted" href="#" onclick="document.getElementById('muted_audio${filename}').play()">
<svg class="playImage" viewBox="0 0 64 64" version="1.1">
<circle cx="32" cy="32" r="29"></circle>
<path d="M56.502,32.301l-37.502,20.101l0.329,-40.804l37.173,20.703Z"></path>
</svg>
</a>`;
}
document.body.innerHTML = document.body.innerHTML.replace(pattern, (match, filename) => {
return audioHTML(filename) + buttonHTML(filename);
});
}, 0);
</script>
this will also solve error with a constant being redefined, which would otherwise appear on desktop Anki when flipped on subsequent cards during review. In addition I replaced square brackets in the regex with their unicode representations, just in case they also interfere with LaTeX preprocessor on Ankidroid, and removed the “fill” attribute, replacing it with “muted” class to be used for styling through the styling tab:
.replay-button.muted svg circle,
.soundLink.muted svg circle {
fill: #557fc9;
}
To clarify some things:
The only important aspect is whether it is placed after the html elements it is supposed to modify, as long as it doesn’t introduce any naming conflicts for global variables with other scripts (now that it is wrapped in setTimeout, all variables in that script are local).
If there is an error in any part of a script, it stops all the following lines inside the same <script> tag from being executed. For this reason independent scripts are better kept in separate tags in order to localize the effect of potential errors and prevent the scripts from breaking each other. In terms of the scope, though, it doesn’t matter as all <script> tags share global definitions.
This one was not necessary, as that CSS was a default Anki style copied to CodePen simply to reproduce the environment. But for the updated version, the CSS presented above is supposed to be placed in the styling tab.