Kcko · September 18, 2025 13:02
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="cs">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>SVG Mask Test</title>
        <style>
            .container {
                display: flex;
                gap: 20px;
                padding: 20px;
                flex-wrap: wrap;
            }

            .test-box {
                border: 1px solid #ccc;
                padding: 10px;
                text-align: center;
            }

            /* Test 1: External URL */
            .B1 {
                display: block;
                width: 100px;
                height: 100px;
                mask-image: url('stripe.svg');
                mask-position: center;
                mask-repeat: no-repeat;
                mask-size: contain;
                background: red;
            }

            /* Test 2: Inline SVG jako data URL */
            .B2 {
                display: block;
                width: 100px;
                height: 100px;
                /* https://yoksel.github.io/url-encoder/ */
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 184.63 236.36'%3E%3Cpath d='M172.33 0c-12.95 17.23-25.87 34.48-38.62 51.79C88.31 112.96 43.42 174.34 0 236.36h.01c49.58-59.38 95.23-122.99 142.83-183.22C156.9 35.48 170.78 17.75 184.63 0z'/%3E%3C/svg%3E");
                mask-position: center;
                mask-repeat: no-repeat;
                mask-size: contain;
                background: red;
            }

            /* Test 3: Inline SVG v HTML */
            .B3 {
                display: block;
                width: 100px;
                height: 100px;
            }

            .B3 svg {
                width: 100%;
                height: 100%;
                fill: red;
            }

            /* Test 4: Webpack prefix */
            .B4 {
                display: block;
                width: 100px;
                height: 100px;
                mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxODQuNjMgMjM2LjM2Ij48cGF0aCBkPSJNMTcyLjMzIDBjLTEyLjk1IDE3LjIzLTI1Ljg3IDM0LjQ4LTM4LjYyIDUxLjc5Qzg4LjMxIDExMi45NiA0My40MiAxNzQuMzQgMCAyMzYuMzZoLjAxYzQ5LjU4LTU5LjM4IDk1LjIzLTEyMi45OSAxNDIuODMtMTgzLjIyQzE1Ni45IDM1LjQ4IDE3MC43OCAxNy43NSAxODQuNjMgMHoiLz48L3N2Zz4=');
                mask-position: center;
                mask-repeat: no-repeat;
                mask-size: contain;
                background: red;
            }
        </style>
    </head>
    <body>
        <h1>Test SVG masek</h1>

        <div class="container">
            <div class="test-box">
                <h3>Test 1:  URL</h3>
                <div class="B1"></div>
                <p>mask-image: url("")</p>
            </div>

            <div class="test-box">
                <h3>Test 2: Data URL (bez fill)</h3>
                <div class="B2"></div>
                <p>Inline SVG jako data URL</p>
            </div>

            <div class="test-box">
                <h3>Test 3: Inline SVG</h3>
                <div class="B3">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 184.63 236.36">
                        <path d="M172.33 0c-12.95 17.23-25.87 34.48-38.62 51.79C88.31 112.96 43.42 174.34 0 236.36h.01c49.58-59.38 95.23-122.99 142.83-183.22C156.9 35.48 170.78 17.75 184.63 0z" />
                    </svg>
                </div>
                <p>SVG přímo v HTML</p>
            </div>

            <div class="test-box">
                <h3>Test 4: Base64 Data URL</h3>
                <div class="B4"></div>
                <p>Base64 encoded SVG</p>
            </div>
        </div>

        <div style="margin: 20px; padding: 20px; background: #f5f5f5">
            <h3>Debugging info:</h3>
            <p>Otevřete Developer Tools (F12) a podívejte se na Console a Network tab</p>
            <p>Pokud vidíte CORS chyby, problém je v cross-origin policy</p>
        </div>
    </body>
 </html>
	<!DOCTYPE html>
	<html lang="cs">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>SVG Mask Test</title>
	<style>
	.container {
	display: flex;
	gap: 20px;
	padding: 20px;
	flex-wrap: wrap;
	}

	.test-box {
	border: 1px solid #ccc;
	padding: 10px;
	text-align: center;
	}

	/* Test 1: External URL */
	.B1 {
	display: block;
	width: 100px;
	height: 100px;
	mask-image: url('stripe.svg');
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
	background: red;
	}

	/* Test 2: Inline SVG jako data URL */
	.B2 {
	display: block;
	width: 100px;
	height: 100px;
	/* https://yoksel.github.io/url-encoder/ */
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 184.63 236.36'%3E%3Cpath d='M172.33 0c-12.95 17.23-25.87 34.48-38.62 51.79C88.31 112.96 43.42 174.34 0 236.36h.01c49.58-59.38 95.23-122.99 142.83-183.22C156.9 35.48 170.78 17.75 184.63 0z'/%3E%3C/svg%3E");
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
	background: red;
	}

	/* Test 3: Inline SVG v HTML */
	.B3 {
	display: block;
	width: 100px;
	height: 100px;
	}

	.B3 svg {
	width: 100%;
	height: 100%;
	fill: red;
	}

	/* Test 4: Webpack prefix */
	.B4 {
	display: block;
	width: 100px;
	height: 100px;
	mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxODQuNjMgMjM2LjM2Ij48cGF0aCBkPSJNMTcyLjMzIDBjLTEyLjk1IDE3LjIzLTI1Ljg3IDM0LjQ4LTM4LjYyIDUxLjc5Qzg4LjMxIDExMi45NiA0My40MiAxNzQuMzQgMCAyMzYuMzZoLjAxYzQ5LjU4LTU5LjM4IDk1LjIzLTEyMi45OSAxNDIuODMtMTgzLjIyQzE1Ni45IDM1LjQ4IDE3MC43OCAxNy43NSAxODQuNjMgMHoiLz48L3N2Zz4=');
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
	background: red;
	}
	</style>
	</head>
	<body>
	<h1>Test SVG masek</h1>

	<div class="container">
	<div class="test-box">
	<h3>Test 1: URL</h3>
	<div class="B1"></div>
	<p>mask-image: url("")</p>
	</div>

	<div class="test-box">
	<h3>Test 2: Data URL (bez fill)</h3>
	<div class="B2"></div>
	<p>Inline SVG jako data URL</p>
	</div>

	<div class="test-box">
	<h3>Test 3: Inline SVG</h3>
	<div class="B3">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 184.63 236.36">
	<path d="M172.33 0c-12.95 17.23-25.87 34.48-38.62 51.79C88.31 112.96 43.42 174.34 0 236.36h.01c49.58-59.38 95.23-122.99 142.83-183.22C156.9 35.48 170.78 17.75 184.63 0z" />
	</svg>
	</div>
	<p>SVG přímo v HTML</p>
	</div>

	<div class="test-box">
	<h3>Test 4: Base64 Data URL</h3>
	<div class="B4"></div>
	<p>Base64 encoded SVG</p>
	</div>
	</div>

	<div style="margin: 20px; padding: 20px; background: #f5f5f5">
	<h3>Debugging info:</h3>
	<p>Otevřete Developer Tools (F12) a podívejte se na Console a Network tab</p>
	<p>Pokud vidíte CORS chyby, problém je v cross-origin policy</p>
	</div>
	</body>
	</html>