Hello, This is awesome! I can't get anything to render though. <

nothing renders about svg-cards HOT 6 CLOSED

htdebeer commented on June 11, 2024

nothing renders

from svg-cards.

Comments (6)

htdebeer commented on June 11, 2024

It is possible the referencing to external SVG files is only working when both the HTML file and external SVG file are served from the same server.

The following is working on my end:

Clone this repository

cd some_directory
clone [email protected]:htdebeer/SVG-cards.git

Go to that directory
```
cd SVG-cards
```

Create a file test.html in that directory with the following contents:

<!DOCTYPE html>
<html lang="en">
  <body>
    <h1>Example SVG with cards</h1>
    <svg 
      width="600"
      height="400"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      >

      <!-- The cards have a natural width of 169.075 and a height of 244.640. It
        center is located at (+98.0375, +122.320). -->
      <!-- The original back color was #0062ff. The color of the back card can
        be changed by setting the fill on the USE-element. -->

        <use xlink:href="svg-cards-indented.svg#back" x="150" y="10" fill="red"/>
        <use xlink:href="svg-cards-indented.svg#heart_1" x="0" y="0"/>
        <use xlink:href="svg-cards-indented.svg#joker_black" x="100" y="100"/>
        <use xlink:href="svg-cards-indented.svg#spade_10" x="200" y="200" transform="rotate(45,198.0375,122.320)scale(0.5)"/>
        <use xlink:href="svg-cards-indented.svg#club_jack" x="300" y="100" transform="rotate(75,198.0375,122.320)scale(0.75)"/>
    </svg>

Run a web server in that same directory, for example using http-server:
```
http-server .
```
This will start a web server that serves the current directory on port 8080.
Open a web browser (I used Firefox) and navigate to http://localhost:8080/test.html. I now see the example with the five cards.

Can you try these steps and report the results?

from svg-cards.

cmstroscio commented on June 11, 2024

That worked, thanks! What do I need to do now to use it in a different repo?

from svg-cards.

htdebeer commented on June 11, 2024

Basically the same: as long as you can serve this SVG file from within that different repo, all you need to do is adapt the xlink:href attribute in the USE element to point to that served SVG file. Thus something like <use xlink:href="some/path/to/svg-cards-indented.svg#club_jack" .../>, where some/path/to is a subdirectory of that different repo.

Do note that USEing external SVG files inside another SVG document might not be very well supported and / or that support might deteriorate in the coming years do to the inpopularity of the SVG project among some of the big browser building organizations and security concerns.

from svg-cards.

cmstroscio commented on June 11, 2024

I updated the path and they are rendering now. Thanks!

Why are the suits cut off on the jacks though?

For example the club on the jack of clubs?

https://github.com/htdebeer/SVG-cards

from svg-cards.

cmstroscio commented on June 11, 2024

Never mind the last question. I see that it is cut off on some French decks. Thanks again!

from svg-cards.

hhirsch commented on June 11, 2024

I suggest to put this information in the readme how to get this example to run.

from svg-cards.

nothing renders about svg-cards HOT 6 CLOSED

Comments (6)

Related Issues (5)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent