Skip to content

Instantly share code, notes, and snippets.

@odanado
Created April 8, 2025 17:32
Show Gist options
  • Select an option

  • Save odanado/ed50701277f63850da942571153a1c2d to your computer and use it in GitHub Desktop.

Select an option

Save odanado/ed50701277f63850da942571153a1c2d to your computer and use it in GitHub Desktop.
片方の circle しか表示されない
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<svg
xmlns="http://www.w3.org/2000/svg"
width="100"
height="100"
style="display: none"
>
<defs>
<pattern
id="redColor"
patternUnits="userSpaceOnUse"
width="1"
height="1"
>
<rect width="1" height="1" fill="red" />
</pattern>
</defs>
<circle cx="50" cy="50" r="40" fill="url(#redColor)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<defs>
<pattern
id="redColor"
patternUnits="userSpaceOnUse"
width="1"
height="1"
>
<rect width="1" height="1" fill="red" />
</pattern>
</defs>
<circle cx="50" cy="50" r="40" fill="url(#redColor)" />
</svg>
</body>
</html>
@odanado
Copy link
Copy Markdown
Author

odanado commented Apr 8, 2025

1つ目の svg に display none が指定されているので、2つ目の svg の url(#redColor) は虚無を参照してしまうっぽい

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment