How to insert trigonometrical shape in webpage?

问题

I am working a project in which I have to insert thousands of trigonometrical shape in a webpage. Basically I'm working on a project of converting an ancient book in html. But the problem is- drawing a svg in Adobe illustrator or in any software is time consuming and managing thousands of svg shape in one html page seems very difficult for us. I have searched a lot in stack overflow to draw a shape quickly and I found this library which convert latext into svg which seemed to be a great solution for us. See a live demo here. We simply create a shape in Mathcha and copy the latext of the shape and insert it in our html page.

But the problem is when we import the tikzax Library in the head of our html page and insert the latext code of that shape (as instructed in the documentation) in the body like this:

<script type="text/tikz">
  \begin{tikzpicture}
\draw (0,0) circle (1in);
  \end{tikzpicture}
</script>

we can't get the ouptut. It only shows a blank html page . The latext code does not effect in any part of the html page. In short we are unable to render the latext in html. Can someone please explain how to render these latext into svg on a webpage. we are unable to find a way to get of it.

Can someone please explain how to render these tikz latext into svg format in a webpage ?

I've attached the screenshots of the html code and the output of it in the chrome browser.

Screenshot of Code:

Output of the Code in Google Chrome (Blank page) as I have told:

回答1:

I tried to setup the example and ran into two issues. I'll explain how to solve those. However, before you do this, try opening your own example again. After I fixed the issues, I went back to look more closely at the problems, but.. it worked. There is a small chance that the maintainer of the files adjusted the CORS-Headers just while I tried this out - so maybe your problem solved itself. In case it doesn't work for you just like that, here is how I solved the initial problems:

1. The library doesn't allow requests from other domains, so you can't just include the JS file from tikzjax.com. To solve this, you have to download the source files and put them in the same folder. The js file itself is not enough, you have to download these files:
   https://tikzjax.com/v1/tikzjax.js
   https://tikzjax.com/ef253ef29e2f057334f77ead7f06ed8f22607d38.wasm. https://tikzjax.com/7620f557a41f2bf40820e76ba1fd4d89a484859d.gz
   Then change your script tag to that local js file: <script src="./tikzjax.js">

2. The script uses fetch to get other files, and this is not working, when opening the page with the file:// protocol (you'll get this error message in the console: Fetch API cannot load file:///ef253ef29e2f057334f77ead7f06ed8f22607d38.wasm. URL scheme must be "http" or "https" for CORS request.
   So you have to setup a local webserver to show the page on e.g. http://localhost:8080. If you're comfortable with the command line, you can use the npm package http-server for such cases. If you haven't installed npm and/or node, you can install it from here (npm is installed with node). Then run the command npm install -g http-server. Then navigate to the folder where your html and js files are (in the terminal) and execute http-server. This will setup the server and the circle should render there.

来源：https://stackoverflow.com/questions/62786976/how-to-insert-trigonometrical-shape-in-webpage