svg newbie: drawing a domino using html and css

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

svg newbie: drawing a domino using html and css

Leland Hovey
My project is to draw the domino 1x6, in which each of the two squares has a height and width of 100px and 3px solid black border. Each dot has a diameter of 20px. I have to use flex.

My attempt is:
----------------------------------------------------------------------
<span id=row>
    <span id=b1>
    <?xml version="1.0" standalone="no"?>
    <svg width="94" height="94" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <circle cx="47" cy="47" r="10" fill="black"/>
    </svg>
    </span>
    <span id=b2>
    <?xml version="1.0" standalone="no"?>
    <svg width="94" height="94" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <circle cx="10" cy="10" r="10" fill="black"/>
        <circle cx="84" cy="10" r="10" fill="black"/>
        <circle cx="10" cy="47" r="10" fill="black"/>
        <circle cx="84" cy="47" r="10" fill="black"/>
        <circle cx="10" cy="84" r="10" fill="black"/>
        <circle cx="84" cy="84" r="10" fill="black"/>
    </svg>
    </span>
</span>
------------------------------------------------------------------------
#row {
    display: flex;
    flex-direction: row;
}
#b1 {
    margin: 0px;
    width: 94px;
    height: 94px;
    border: solid black 3px;
    padding: 0px;
}
#b2 {
    margin: 0px;
    width: 94px;
    height: 94px;
    border: solid black 3px;
    padding: 0px;
}
--------------------------------------------------------------------------
This results in the domino looking mostly as intended, except each *outline* of the dots is slightly incorrect.  I'm unsure of they are too large or too small, or incorrectly located.  Unclear about what the problem is.  I was provided with an image to match.  Unfortunately, I could not include it.

Thanks for any suggestions,

--lh
_______________________________________________
dev-tech-svg mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-svg
Reply | Threaded
Open this post in threaded view
|

Re: svg newbie: drawing a domino using html and css

Jeremie Patonnier
Hi Leland!

It's pretty hard to provide an accurate answer as it's unclear what is
wrong as you cannot provide any reference image.
There are a few points that are somewhat puzzling: Why flex is a
requirement? Can't you build your image 100% with SVG instead of mixing SVG
and HTML to achieve the graphic result? What are the "outlines" of the dots
and in what way are they incorrect ?

I did a quick example based on your code, is it what you want to achieve?

   - https://codepen.io/JeremiePat/pen/roNvBe

Best,
Jeremie

Le dim. 9 déc. 2018 à 21:10, Leland Hovey <[hidden email]> a écrit :

> My project is to draw the domino 1x6, in which each of the two squares has
> a height and width of 100px and 3px solid black border. Each dot has a
> diameter of 20px. I have to use flex.
>
> My attempt is:
> ----------------------------------------------------------------------
> <span id=row>
>     <span id=b1>
>     <?xml version="1.0" standalone="no"?>
>     <svg width="94" height="94" xmlns="http://www.w3.org/2000/svg"
> version="1.1">
>         <circle cx="47" cy="47" r="10" fill="black"/>
>     </svg>
>     </span>
>     <span id=b2>
>     <?xml version="1.0" standalone="no"?>
>     <svg width="94" height="94" xmlns="http://www.w3.org/2000/svg"
> version="1.1">
>         <circle cx="10" cy="10" r="10" fill="black"/>
>         <circle cx="84" cy="10" r="10" fill="black"/>
>         <circle cx="10" cy="47" r="10" fill="black"/>
>         <circle cx="84" cy="47" r="10" fill="black"/>
>         <circle cx="10" cy="84" r="10" fill="black"/>
>         <circle cx="84" cy="84" r="10" fill="black"/>
>     </svg>
>     </span>
> </span>
> ------------------------------------------------------------------------
> #row {
>     display: flex;
>     flex-direction: row;
> }
> #b1 {
>     margin: 0px;
>     width: 94px;
>     height: 94px;
>     border: solid black 3px;
>     padding: 0px;
> }
> #b2 {
>     margin: 0px;
>     width: 94px;
>     height: 94px;
>     border: solid black 3px;
>     padding: 0px;
> }
> --------------------------------------------------------------------------
> This results in the domino looking mostly as intended, except each
> *outline* of the dots is slightly incorrect.  I'm unsure of they are too
> large or too small, or incorrectly located.  Unclear about what the problem
> is.  I was provided with an image to match.  Unfortunately, I could not
> include it.
>
> Thanks for any suggestions,
>
> --lh
> _______________________________________________
> dev-tech-svg mailing list
> [hidden email]
> https://lists.mozilla.org/listinfo/dev-tech-svg
>


--
Jeremie
.............................
Web : http://jeremie.patonnier.net
Twitter : @JeremiePat <http://twitter.com/JeremiePat>
_______________________________________________
dev-tech-svg mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-svg
Reply | Threaded
Open this post in threaded view
|

Re: svg newbie: drawing a domino using html and css

Leland Hovey
In reply to this post by Leland Hovey
Thanks for the reply.  Can you view these two reference images?

https://photos.google.com/photo/AF1QipNItDVL8K-ALwphi8JB0DELSHvgX3tRDYQZZYiZ

https://photos.google.com/photo/AF1QipNXjacr-rr29hrV8LwahtJqeiVT_Owv2cy4Hi-J
_______________________________________________
dev-tech-svg mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-svg