SVG Elements not in view on page load do not display - google-chrome
I have an SVG image (with code generated by Adobe Illustrator CS6) embedded in a web page. I've isolated the SVG code in this jsFiddle (it is also embedded below).
In Chrome (but not Firefox), when the bottom part of the SVG isn't in view, it doesn't render. Shrink the window and scroll to the top of the HTML section on the jsFiddle and then reload to see what I'm talking about. Once you click the section, it appears.
What can I do to fix this?
Edit: WebKit bug filed, as it appears to be a WebKit bug. View bug report
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="690px" height="420px" viewBox="0 43 690 420" enable-background="new 0 43 690 420" xml:space="preserve">
<defs></defs>
<filter id="fullblur" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
<filter id="halfblur" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" />
</filter>
<filter id="noblur" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="0" />
</filter>
<!-- BACKGROUND (hidden) -->
<rect y="43" display="none" fill="#D1DBBB" width="690" height="420"/>
<!-- STAGE -->
<ellipse fill="#CC3333" stroke="#000000" cx="339.5" cy="43" rx="169.5" ry="42.5"/>
<!-- SEATS -->
<g>
<!-- STUDENT SECTIONS -->
<g id="studhover">
<g filter="url(#halfblur)" id="studchart" class="chartsection">
<g id="s1">
<path class="sFill" fill="#FECB2F" d="M90.75,136c0,2.761,2.239,5,5,5h150c2.761,0,5-2.239,5-5V90.5c0-2.761-2.239-5-5-5h-150
c-2.761,0-5,2.239-5,5V136z"/>
<path class="sStroke" fill="none" stroke="#000000" d="M90.75,136c0,2.761,2.239,5,5,5h150c2.761,0,5-2.239,5-5V90.5c0-2.761-2.239-5-5-5h-150
c-2.761,0-5,2.239-5,5V136z"/>
</g>
<g id="s2">
<path class="sFill" fill="#FECB2F" d="M265.75,150c0,2.761,2.239,5,5,5h150c2.762,0,5-2.239,5-5v-45.5c0-2.761-2.238-5-5-5h-150
c-2.761,0-5,2.239-5,5V150z"/>
<path class="sStroke" fill="none" stroke="#000000" d="M265.75,150c0,2.761,2.239,5,5,5h150c2.762,0,5-2.239,5-5v-45.5c0-2.761-2.238-5-5-5h-150
c-2.761,0-5,2.239-5,5V150z"/>
</g>
<g id="s3">
<path class="sFill" fill="#FECB2F" d="M439.25,136c0,2.761,2.238,5,5,5h150c2.762,0,5-2.239,5-5V90.5c0-2.761-2.238-5-5-5h-150c-2.762,0-5,2.239-5,5V136z"/>
<path class="sStroke" fill="none" stroke="#000000" d="M439.25,136c0,2.761,2.238,5,5,5h150c2.762,0,5-2.239,5-5V90.5c0-2.761-2.238-5-5-5h-150
c-2.762,0-5,2.239-5,5V136z"/>
</g>
<g id="s4">
<path class="sFill" fill="#FECB2F" d="M90.75,205.5c0,2.761,2.239,5,5,5h150c2.761,0,5-2.239,5-5V160c0-2.761-2.239-5-5-5h-150
c-2.761,0-5,2.239-5,5V205.5z"/>
<path class="sStroke" fill="none" stroke="#000000" d="M90.75,205.5c0,2.761,2.239,5,5,5h150c2.761,0,5-2.239,5-5V160c0-2.761-2.239-5-5-5h-150
c-2.761,0-5,2.239-5,5V205.5z"/>
</g>
<g id="s5">
<path class="sFill" fill="#FECB2F" d="M265.75,218c0,2.761,2.239,5,5,5h150c2.762,0,5-2.239,5-5v-45.5c0-2.761-2.238-5-5-5h-150
c-2.761,0-5,2.239-5,5V218z"/>
<path class="sStroke" fill="none" stroke="#000000" d="M265.75,218c0,2.761,2.239,5,5,5h150c2.762,0,5-2.239,5-5v-45.5c0-2.761-2.238-5-5-5h-150
c-2.761,0-5,2.239-5,5V218z"/>
</g>
<g id="s6">
<path class="sFill" fill="#FECB2F" d="M439.25,205.5c0,2.761,2.238,5,5,5h150c2.762,0,5-2.239,5-5V160c0-2.761-2.238-5-5-5h-150
c-2.762,0-5,2.239-5,5V205.5z"/>
<path class="sStroke" fill="none" stroke="#000000" d="M439.25,205.5c0,2.761,2.238,5,5,5h150c2.762,0,5-2.239,5-5V160c0-2.761-2.238-5-5-5h-150
c-2.762,0-5,2.239-5,5V205.5z"/>
</g>
</g>
<!-- Filling in the gaps -->
<g>
<rect x="251" y="84" fill="transparent" width="15" height="140" id="sVertLine1" />
<rect x="425" y="84" fill="transparent" width="15" height="140" id="sVertLine2" />
<rect x="266" y="84" fill="transparent" width="159" height="15" id="sHorizLine1" />
<rect x="90" y="140" fill="transparent" width="161" height="15" id="sHorizLine2a" />
<rect x="440" y="140" fill="transparent" width="161" height="15" id="sHorizLine2b" />
<rect x="266" y="153" fill="transparent" width="161" height="15" id="sHorizLine3" />
<rect x="90" y="210" fill="transparent" width="161" height="12" id="sHorizLine4a" />
<rect x="440" y="210" fill="transparent" width="161" height="12" id="sHorizLine4b" />
</g>
</g>
<!-- GUEST SECTIONS -->
<g id="guesthover">
<g filter="url(#halfblur)" id="guestchart" class="chartsection">
<g>
<path class="gFill" fill="#3333CC" d="M91.5,273c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5v-45.5c0-2.761-2.239-5-5-5h-150
c-2.761,0-5,2.239-5,5V273z"/>
<path class="gStroke" fill="none" stroke="#000000" d="M91.5,273c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5v-45.5c0-2.761-2.239-5-5-5h-150
c-2.761,0-5,2.239-5,5V273z"/>
</g>
<g>
<path class="gFill" fill="#3333CC" d="M440,273c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.761-2.238-5-5-5H445c-2.762,0-5,2.239-5,5
V273z"/>
<path class="gStroke" fill="none" stroke="#000000" d="M440,273c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.761-2.238-5-5-5H445
c-2.762,0-5,2.239-5,5V273z"/>
</g>
<g>
<path class="gFill" fill="#3333CC" d="M91.5,342.5c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5V297c0-2.762-2.239-5-5-5h-150
c-2.761,0-5,2.238-5,5V342.5z"/>
<path class="gStroke" fill="none" stroke="#000000" d="M91.5,342.5c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5V297c0-2.762-2.239-5-5-5h-150
c-2.761,0-5,2.238-5,5V342.5z"/>
</g>
<g>
<path class="gFill" fill="#3333CC" d="M440,342.5c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5V297c0-2.762-2.238-5-5-5H445c-2.762,0-5,2.238-5,5
V342.5z"/>
<path class="gStroke" fill="none" stroke="#000000" d="M440,342.5c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5V297c0-2.762-2.238-5-5-5H445
c-2.762,0-5,2.238-5,5V342.5z"/>
</g>
<g>
<path class="gFill" fill="#3333CC" d="M266.5,287c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.761-2.238-5-5-5h-150
c-2.761,0-5,2.239-5,5V287z"/>
<path class="gStroke" fill="none" stroke="#000000" d="M266.5,287c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.761-2.238-5-5-5h-150
c-2.761,0-5,2.239-5,5V287z"/>
</g>
<g>
<path class="gFill" fill="#3333CC" d="M266.5,355c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.762-2.238-5-5-5h-150
c-2.761,0-5,2.238-5,5V355z"/>
<path class="gStroke" fill="none" stroke="#000000" d="M266.5,355c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.762-2.238-5-5-5h-150
c-2.761,0-5,2.238-5,5V355z"/>
</g>
<g>
<path class="gFill" fill="#3333CC" d="M91.5,410.5c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5V365c0-2.762-2.239-5-5-5h-150
c-2.761,0-5,2.238-5,5V410.5z"/>
<path class="gStroke" fill="none" stroke="#000000" d="M91.5,410.5c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5V365c0-2.762-2.239-5-5-5h-150
c-2.761,0-5,2.238-5,5V410.5z"/>
</g>
<g>
<path class="gFill" fill="#3333CC" d="M440,410.5c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5V365c0-2.762-2.238-5-5-5H445c-2.762,0-5,2.238-5,5
V410.5z"/>
<path class="gStroke" fill="none" stroke="#000000" d="M440,410.5c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5V365c0-2.762-2.238-5-5-5H445
c-2.762,0-5,2.238-5,5V410.5z"/>
</g>
<g>
<path class="gFill" fill="#3333CC" d="M266.5,423c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.762-2.238-5-5-5h-150
c-2.761,0-5,2.238-5,5V423z"/>
<path class="gStroke" fill="none" stroke="#000000" d="M266.5,423c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.762-2.238-5-5-5h-150
c-2.761,0-5,2.238-5,5V423z"/>
</g>
</g>
<!-- Filling in the gaps -->
<g>
<rect x="251" y="224" fill="transparent" width="15" height="206" id="gVertLine1" />
<rect x="425" y="224" fill="transparent" width="15" height="206" id="gVertLine2" />
<rect x="266" y="222" fill="transparent" width="159" height="15" id="gHorizLine1" />
<rect x="90" y="278" fill="transparent" width="161" height="15" id="gHorizLine2a" />
<rect x="440" y="278" fill="transparent" width="161" height="15" id="gHorizLine2b" />
<rect x="266" y="291" fill="transparent" width="161" height="15" id="gHorizLine3" />
<rect x="90" y="348" fill="transparent" width="161" height="15" id="gHorizLine4a" />
<rect x="440" y="348" fill="transparent" width="161" height="15" id="gHorizLine4b" />
<rect x="266" y="360" fill="transparent" width="161" height="15" id="gHorizLine5" />
<rect x="90" y="417" fill="transparent" width="161" height="13" id="gHorizLine4a" />
<rect x="440" y="417" fill="transparent" width="161" height="13" id="gHorizLine4b" />
</g>
</g>
</g>
</svg>
This is a Webkit bug caused by the use of filters. I removed the <filter> sections and the flter="url(...)" tags to stop the filters from running and it now works.
Related
SVG element disappears after apply rotate animation
When I am adding <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360 8.4 9.5" to="0 8.4 9.5" dur="0.5s" additive="sum" repeatCount="indefinite" /> to <g id="icon-border"> element disappears. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="65" height="65" viewBox="0 0 65 65"> <defs> <filter id="Ellipse_320" x="0" y="0" width="65" height="65" filterUnits="userSpaceOnUse"> <feOffset input="SourceAlpha"/> <feGaussianBlur stdDeviation="7.5" result="blur"/> <feFlood flood-color="#dec652" flood-opacity="0.478"/> <feComposite operator="in" in2="blur"/> <feComposite in="SourceGraphic"/> </filter> <style> </style> </defs> <g id="Group_470" data-name="Group 470" transform="translate(-1646.5 -154.5)"> <g transform="matrix(1, 0, 0, 1, 1646.5, 154.5)" filter="url(#Ellipse_320)"> <circle id="Ellipse_320-2" data-name="Ellipse 320" cx="10" cy="10" r="10" transform="translate(22.5 22.5)" fill="#dec652"/> </g> <g id="icon-border" transform="translate(1666 174)" fill="none" stroke="#dec652" stroke-width="1" stroke-dasharray="10"> <circle cx="13" cy="13" r="13" stroke="none"/> <circle cx="13" cy="13" r="12.5" fill="none"/> <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360 8.4 9.5" to="0 8.4 9.5" dur="0.5s" additive="sum" repeatCount="indefinite" /> </g> <g id="text-change-accept-svgrepo-com" transform="translate(1673.811 182.551)"> <path id="Path_11" data-name="Path 11" d="M14.907,12A2.907,2.907,0,1,1,12,14.907,2.907,2.907,0,0,1,14.907,12Zm1.4,1.663-2.163,2.163-.61-.813a.264.264,0,1,0-.423.317l.793,1.057a.264.264,0,0,0,.4.028l2.378-2.378a.264.264,0,0,0-.374-.374Z" transform="translate(-6.715 -8.3)" fill="#fff"/> <path id="Path_12" data-name="Path 12" d="M6.767,17H2.529l-.062,0a.529.529,0,0,0,.062,1.054h4.32a3.446,3.446,0,0,1-.092-.793Q6.757,17.131,6.767,17Z" transform="translate(-2 -10.657)" fill="#fff"/> <path id="Path_13" data-name="Path 13" d="M7.02,14.057H2.529A.529.529,0,0,1,2.467,13l.062,0H7.713A3.439,3.439,0,0,0,7.02,14.057Z" transform="translate(-2 -8.772)" fill="#fff"/> <path id="Path_14" data-name="Path 14" d="M2.529,10.057A.529.529,0,0,1,2.467,9l.062,0h9.514a.529.529,0,0,1,.062,1.054l-.062,0Z" transform="translate(-2 -6.886)" fill="#fff"/> <path id="Path_15" data-name="Path 15" d="M12.042,5H2.529L2.467,5a.529.529,0,0,0,.062,1.054h9.514l.062,0A.529.529,0,0,0,12.042,5Z" transform="translate(-2 -5)" fill="#fff"/> </g> </g> </svg>
It this more like it? I removed many of the transform/translate. The animation on <g id="icon-border"> was fine. You just need to place the child circles in 0,0 and then transform/translate the <g> to the center. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" viewBox="0 0 65 65"> <defs> <filter id="Ellipse_320" x="0" y="0" width="65" height="65" filterUnits="userSpaceOnUse"> <feOffset input="SourceAlpha"/> <feGaussianBlur stdDeviation="7.5" result="blur"/> <feFlood flood-color="#dec652" flood-opacity="0.478"/> <feComposite operator="in" in2="blur"/> <feComposite in="SourceGraphic"/> </filter> </defs> <g id="Group_470" data-name="Group 470"> <circle id="Ellipse_320-2" data-name="Ellipse 320" filter="url(#Ellipse_320)" cx="32.5" cy="32.5" r="10" fill="#dec652"/> <g id="icon-border" transform="translate(32.5 32.5)" fill="none" stroke="#dec652" stroke-width="1" stroke-dasharray="10"> <circle cx="0" cy="0" r="13" stroke="none"/> <circle cx="0" cy="0" r="12.5"/> <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360" to="0" dur="0.5s" additive="sum" repeatCount="indefinite" /> </g> <g id="text-change-accept-svgrepo-com" transform="translate(27.5 28.5)"> <path id="Path_11" data-name="Path 11" d="M14.907,12A2.907,2.907,0,1,1,12,14.907,2.907,2.907,0,0,1,14.907,12Zm1.4,1.663-2.163,2.163-.61-.813a.264.264,0,1,0-.423.317l.793,1.057a.264.264,0,0,0,.4.028l2.378-2.378a.264.264,0,0,0-.374-.374Z" transform="translate(-6.715 -8.3)" fill="#fff"/> <path id="Path_12" data-name="Path 12" d="M6.767,17H2.529l-.062,0a.529.529,0,0,0,.062,1.054h4.32a3.446,3.446,0,0,1-.092-.793Q6.757,17.131,6.767,17Z" transform="translate(-2 -10.657)" fill="#fff"/> <path id="Path_13" data-name="Path 13" d="M7.02,14.057H2.529A.529.529,0,0,1,2.467,13l.062,0H7.713A3.439,3.439,0,0,0,7.02,14.057Z" transform="translate(-2 -8.772)" fill="#fff"/> <path id="Path_14" data-name="Path 14" d="M2.529,10.057A.529.529,0,0,1,2.467,9l.062,0h9.514a.529.529,0,0,1,.062,1.054l-.062,0Z" transform="translate(-2 -6.886)" fill="#fff"/> <path id="Path_15" data-name="Path 15" d="M12.042,5H2.529L2.467,5a.529.529,0,0,0,.062,1.054h9.514l.062,0A.529.529,0,0,0,12.042,5Z" transform="translate(-2 -5)" fill="#fff"/> </g> </g> </svg>
SVG text not horizontally center aligning
I generated a SVG using Adobe XD. They use transform for positioning things but the text in my mini computer screen is not always the same width (it is dynamically generated). I have tried anchored, anything I could find but it still didn't work. This is how it looks with the current code:
Here is the code:
<svg xmlns="http://www.w3.org/2000/svg" width="903.5" height="860.5" viewBox="0 0 1200 1041">
<g transform="translate(-397)">
<g
transform="translate(507 975)"
fill="#fff"
stroke="#707070"
strokeWidth="1"
>
<rect width="907" height="66" rx="33" stroke="none" />
<rect x="0.5" y="0.5" width="906" height="65" rx="32.5" fill="none" />
</g>
<rect width="119" height="395" transform="translate(901 613)" fill="#fff" />
<g
transform="translate(397)"
fill="#232323"
stroke="#fff"
stroke-width="30"
>
<rect width="1127" height="627" rx="103" stroke="none" />
<rect x="15" y="15" width="1097" height="597" rx="88" fill="none" />
</g>
<text
fill="white"
fontSize="96"
fontFamily="Fredoka"
>
{screenText}
</text>
</g>
</svg>
You can use transform/translate, text-anchor and dominant-baseline to place a text in the middle of something.
body {
background: gray;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1041">
<g
transform="translate(600 975)"
fill="#fff"
stroke="#707070"
stroke-width="1">
<rect x="-453.5" width="907" height="66" rx="33" stroke="none" />
<rect x="-454" y="0.5" width="906" height="65" rx="32.5" fill="none" />
</g>
<rect width="119" height="395" transform="translate(545.5 613)" fill="#fff" />
<g transform="translate(50)"
fill="#232323"
stroke="#fff"
stroke-width="30">
<rect width="1127" height="627" rx="103" stroke="none" />
<rect x="15" y="15" width="1097" height="597" rx="88" fill="none" />
</g>
<text
fill="#fff"
font-size="96"
font-family="Fredoka"
transform="translate(600 300)"
text-anchor="middle"
dominant-baseline="middle">
{screenText}
</text>
</svg>
Thanks to Buhan Yu's comment I learned that you need to specify x and y to center align it. I set x="50%" and it worked!
Facing problem while trying trying to rotate SVG animation
I'm a beginner in animation. I am trying to learn svg animation from the following piece of code. <svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" viewbox="50 70 200 200"> <path stroke="black" fill="none" d="M70,85H125V140H70V85Z" ></path> <path d="M0,0 L-2.69,-4.95L0,-2.2L2.69,-4.95L0,0z" transform="rotate(-90)" style="fill: #ff0000;"> <animateMotion path="M70,85H125V140H70V85Z" dur="10s" rotate="auto" repeatCount="indefinite"></animateMotion> </path> <g> <desc>white mask</desc> <rect x="90" y="80" width="15" height="65" fill="white" /> <rect x="65" y="105" width="65" height="15" fill="white" /> </g> </svg> I'm tring to move the arrow to rotate in opposite direction (i.e anticlockwise) but unable to achieve that. I have tried to change the path but I'm stuck at this point. Any help will be appreciated.
We can use keyTimes and keyPoints to run the animation backwards and alter the transform to rotate the arrow. See how the keyPoints go from 1 to 0. <svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" viewbox="50 70 200 200"> <path stroke="black" fill="none" d="M70,85H125V140H70V85Z" ></path> <path d="M0,0 L-2.69,-4.95L0,-2.2L2.69,-4.95L0,0z" transform="rotate(90)" style="fill: #ff0000;"> <animateMotion keyPoints="1;0" keyTimes="0;1" path="M70,85H125V140H70V85Z" dur="10s" rotate="auto" repeatCount="indefinite"></animateMotion> </path> <g> <desc>white mask</desc> <rect x="90" y="80" width="15" height="65" fill="white" /> <rect x="65" y="105" width="65" height="15" fill="white" /> </g> </svg>
SVG in img fix for IE breaks Chrome
So I made an SVG for a very svg-friendly-design logo in my recent website. More as a "ah this is cool" than an absolute necessity, but now that it's not working I'm obsessed. I dropped it in an <img /> tag, sized it up as I like, and bam sweet logo, used in different sizes in a couple of places, scales beautifully. Ah the miracles of modern web. Remember .PNG fixes? We have come a long way in a few short years. I'm so happy we no longer have to deal with that archaic IE bullsh... Oh, you've got to be kidding me! So apparently IE gets funky. Alright, google this thing. "Remove height and width attributes." Fantastic, do that... Chrome starts having the same issue with the modified file. Argh. What am I doing wrong? <svg width="264" height="264" xmlns="http://www.w3.org/2000/svg"> <g> <title>background</title> <rect x="-1" y="-1" width="266" height="266" id="canvas_background" fill="none"/> <g id="canvasGrid" display="none"> <rect id="svg_1" width="100%" height="100%" x="0" y="0" stroke-width="0" fill="url(#gridpattern)"/> </g> </g> <g> <title>Layer 1</title> <ellipse fill="#000000" stroke-width="0" cx="132.081358" cy="132.179138" id="svg_3" rx="132" ry="132" stroke="#fff"/> <ellipse fill="#000000" stroke="#fff" stroke-width="6" cx="132.081346" cy="132.17914" id="svg_5" rx="126" ry="126"/> <ellipse fill="#000000" stroke="#fff" stroke-width="7" cx="132.081365" cy="213.774884" id="svg_13" rx="44" ry="44"/> <line fill="none" stroke-width="7" stroke-opacity="null" fill-opacity="null" x1="12.496805" y1="168.812302" x2="251.665903" y2="168.812302" id="svg_24" stroke-linejoin="null" stroke-linecap="null" stroke="#fff"/> <ellipse fill="#d80202" stroke="#fff" stroke-width="7" cx="132.081369" cy="50.410766" id="svg_6" rx="44" ry="44"/> <line fill="none" stroke="#fff" stroke-width="7" stroke-opacity="null" fill-opacity="null" x1="132.08135" y1="95.543239" x2="132.08135" y2="166.831116" id="svg_26" stroke-linejoin="null" stroke-linecap="null"/> </g> </svg>
Try use one of these SVG's and adjust the to make it responsive remove the height and width attrubite from the <svg> tag.
The first one has the style inline and the second has it in <style> tag.
code:
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 264 264" style="enable-background:new 0 0 264 264;" xml:space="preserve" width="100" height="100">
<g>
<title>background</title>
<rect id="canvas_background" x="-1" y="-1" style="fill:none;" width="266" height="266"/>
<g id="canvasGrid" style="display:none;">
<rect id="svg_1" style="display:inline;fill:none;" width="264" height="264"/>
</g>
</g>
<g>
<title>Layer 1</title>
<ellipse id="svg_3" cx="132.1" cy="132.2" rx="132" ry="132"/>
<ellipse id="svg_5" style="stroke:#FFFFFF;stroke-width:6;" cx="132.1" cy="132.2" rx="126" ry="126"/>
<ellipse id="svg_13" style="stroke:#FFFFFF;stroke-width:7;" cx="132.1" cy="213.8" rx="44" ry="44"/>
<line id="svg_24" style="fill:none;stroke:#FFFFFF;stroke-width:7;" x1="12.5" y1="168.8" x2="251.7" y2="168.8"/>
<ellipse id="svg_6" style="fill:#D80202;stroke:#FFFFFF;stroke-width:7;" cx="132.1" cy="50.4" rx="44" ry="44"/>
<line id="svg_26" style="fill:none;stroke:#FFFFFF;stroke-width:7;" x1="132.1" y1="95.5" x2="132.1" y2="166.8"/>
</g>
</svg>
<br />
<br />
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 264 264" style="enable-background:new 0 0 264 264;" xml:space="preserve" width="100" height="100">
<style type="text/css">
.st0{fill:none;}
.st1{display:none;}
.st2{display:inline;fill:none;}
.st3{stroke:#FFFFFF;stroke-width:6;}
.st4{stroke:#FFFFFF;stroke-width:7;}
.st5{fill:none;stroke:#FFFFFF;stroke-width:7;}
.st6{fill:#D80202;stroke:#FFFFFF;stroke-width:7;}
</style>
<g>
<rect id="canvas_background" x="-1" y="-1" class="st0" width="266" height="266"/>
<g id="canvasGrid" class="st1">
<rect id="svg_1" class="st2" width="264" height="264"/>
</g>
</g>
<g>
<ellipse id="svg_3" cx="132.1" cy="132.2" rx="132" ry="132"/>
<ellipse id="svg_5" class="st3" cx="132.1" cy="132.2" rx="126" ry="126"/>
<ellipse id="svg_13" class="st4" cx="132.1" cy="213.8" rx="44" ry="44"/>
<line id="svg_24" class="st5" x1="12.5" y1="168.8" x2="251.7" y2="168.8"/>
<ellipse id="svg_6" class="st6" cx="132.1" cy="50.4" rx="44" ry="44"/>
<line id="svg_26" class="st5" x1="132.1" y1="95.5" x2="132.1" y2="166.8"/>
</g>
</svg>
SVG path positioning
I am making face SVG. Unable to set eyebrow on proper place. Please advice. <svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" /> <ellipse cx="35" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" /> <ellipse cx="65" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" /> <path d="M10,20 Q25,10 40,20" fill="none" stroke="#000" stroke-width="1.5px" /> </svg>
You may use g element and add translation (useful if you will have more path to move at the same time):
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
<ellipse cx="35" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
<ellipse cx="65" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
<g transform="translate(40,20)">
<path d="M10,20 Q25,10 40,20" fill="none" stroke="#000" stroke-width="1.5px" />
</g>
</svg>
Or simply translation on path:
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
<ellipse cx="35" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
<ellipse cx="65" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
<path transform="translate(40,20)" d="M10,20 Q25,10 40,20" fill="none" stroke="#000" stroke-width="1.5px" />
</svg>
Here is the full SVG with both eyebrow (translation for both using g and then translate the 2nd one relatively to g). With this configuration you have to simply adjust the translation of g element if want it upper of lower
svg g {
transition: 0.5s;
}
svg:hover g {
transform: translate(10px, 15px);
}
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
<ellipse cx="35" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
<ellipse cx="65" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
<g transform="translate(10,20)">
<path d="M10,20 Q25,10 40,20" fill="none" stroke="#000" stroke-width="1.5px" />
<path transform="translate(30,0)" d="M10,20 Q25,10 40,20" fill="none" stroke="#000" stroke-width="1.5px" />
</g>
</svg>
Use the transform attribute to position the path, like transform="translate(50,80)" Make sure you don't use px Other transformations like scale or rotate are also available. See the specs. <svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" /> <ellipse cx="35" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" /> <ellipse cx="65" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" /> <path d="M16, 20 Q27, 10 35, 20" transform="translate(9, 17)" fill="none" stroke="#000" stroke-width="1.5px" /> <path d="M16, 20 Q27, 10 35, 20" transform="translate(40, 17)" fill="none" stroke="#000" stroke-width="1.5px" /> </svg>