Closed
Description
Works:
svg![
C!["viewport__svg"],
defs![
pattern![
attrs! {
At::Id => "smallGrid",
At::Width => "8",
At::Height => "8",
At::PatternUnits => "userSpaceOnUse",
},
path![attrs! {
At::D => "M 8 0 H 0 V 8"
At::Stroke => "lightgray"
At::StrokeWidth => "0.5"
At::Fill => "none"
}]
],
pattern![
attrs! {
At::Id => "largeGrid",
At::Width => "80",
At::Height => "80",
At::PatternUnits => "userSpaceOnUse",
},
rect![attrs! {
At::Width => "80",
At::Height => "80",
At::Fill => "url(#smallGrid)"
}]
]
],
g![
g![
attrs! {
At::Width => "100%",
At::Height => "100%"
},
rect![attrs! {
At::Width => "100%",
At::Height => "100%",
At::Fill => "url(#largeGrid)",
}]
],
rect![attrs! {
At::X => "100",
At::Y => "100",
At::Fill => "red",
At::Width => "100",
At::Height => "100"
}]
]
]
Doesn't work:
Rendered with white background instead of the pattern
svg![
C!["viewport__svg"],
defs![raw!(
r#"
<pattern id="smallGrid" width="8" height="8" patternUnits="userSpaceOnUse">
<path id="smallGridPath" d="M 8 0 H 0 V 8" fill="none" stroke="lightgray" strokeWidth="0.5" />
</pattern>
<pattern id="largeGrid" width="80" height="80" patternUnits="userSpaceOnUse">
<rect id="largeGridRect" width="80" height="80" fill="url(#smallGrid)" />
</pattern>
<g id="shape">
<rect x="40" y="40" width="40" height="40" />
</g>
"#
)],
g![
g![
attrs! {
At::Width => "100%",
At::Height => "100%"
},
rect![attrs! {
At::Width => "100%",
At::Height => "100%",
At::Fill => "url(#largeGrid)",
}]
],
rect![attrs! {
At::X => "100",
At::Y => "100",
At::Fill => "red",
At::Width => "100",
At::Height => "100"
}]
]
]