asasass
1
Can I maneuver an SVG inside a div tag?
https://jsfiddle.net/c0qshm0t/
I got this far. How would I center it?
<div style="width: 64px;height: 64px;background-color: rgba(0,0,0,.7);background-repeat: no-repeat;background-size: 24px;background-position: 58% 50%;border-radius: 500px;border: 1px solid blue;cursor: pointer;">
<svg viewBox="-22 0 1229 1481" width="24" height="29" style="background-color:green;display:block;margin: 0 auto;">
<path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" fill="red"/>
</svg>
</div>
asasass
2
I tried doing “display:block;margin: 0 auto;” And that doesn’t seem to work.
asasass
3
Done:
<div style="width: 64px;height: 64px;background-color: rgba(0,0,0,.7);background-repeat: no-repeat;background-size: 24px;background-position: 58% 50%;border-radius: 500px;border: 1px solid blue;cursor: pointer;">
<svg viewBox="-22 0 1229 1481" width="24" height="29" style="display:block;margin:16px auto;background-color:green;">
<path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" fill="red"/>
</svg>
</div>
system
Closed
4
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.