1 year ago
#380395
user13812417
SVG fill of nested pattern
I'm currently working on nested pattern in svg where the first pattern is used to fill the second shape which is used to fill the third.
The following code snippet run perfectly on a website like w3schools, but once converted to a file and to use on a browser it only shows an empty box, with no error code.
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 100 100">
<pattern id="a" viewBox="0 0 12 12" width="135%" height="150%">
<g stroke="black" stroke-width="1">
<circle cx="6" cy="6" r="4" fill="red"/>
<circle cx="6" cy="6" r="2" fill="yellow"/>
</g>
<animate attributeName="x" from="0" to="1.35" dur="5s" repeatCount="indefinite"/>
</pattern>
<pattern id="b" viewBox="0 0 50 50" width="100%" height="100%">
<Polygon points="0.05,0 0.05,50 50.05,50" fill="url(#a)"/>
<Polygon points="0.05,0 0.05,50 50.05,50" fill="url(#a)" transform="scale(-1,1) rotate(90 50 50) translate(0,100)"/>
</pattern>
<polygon points="0,0 0,50 50,50 50,0" fill="url(#b)"/>
<polygon points="0,0 0,50 50,50 50,0" fill="url(#b)" transform="rotate(90 50 50)"/>
<polygon points="0,0 0,50 50,50 50,0" fill="url(#b)" transform="rotate(180 50 50)"/>
<polygon points="0,0 0,50 50,50 50,0" fill="url(#b)" transform="rotate(270 50 50)"/>
<rect width="100" height="100" fill="transparent" stroke="black" stroke-width="3"/>
</svg>Here is the following output:
I tried to use diverse way to use the pattern "a" like using <defs> or <use xlinks:href>, the code still run but it doesn't give the expected output or any errors. I tried using diverse browser (Chrome, Opera, Edge, Firefox), but they all give the same empty box. When I copy and paste the code while inspecting the element, to the w3school website, it all works fine.
html
svg
fill
0 Answers
Your Answer