Не работает обрезка/маска при указании отдельного файла svg через url

Question

Согласно документации можно использовать свойство clip-path, равное url(path_to_external_file.svg#clip_path_id) для обрезки отображаемого блока. Однако я не смог заставить это работать. Уточню, что используется отдельный svg-файл.

Пример:

1.svg:

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="0" height="0">
    <defs>
        <clipPath id="mymask">
            <path transform="translate(0.000000,163.000000) scale(0.100000,-0.100000)" d="M373 1197 c-355 -355 -363 -363 -363 -402 0 -39 8 -47 363 -402 355
-355 363 -363 402 -363 39 0 47 8 402 363 355 355 363 363 363 402 0 39 -8 47
-363 402 -355 355 -363 363 -402 363 -39 0 -47 -8 -402 -363z" />
        </clipPath>
    </defs>
</svg>

css:

.svgMask {
    width: 200px;
    height: 200px;
    background-color: #1265F3;
    clip-path:url(1.svg#mymask); 
}

html:

    <div class="svgMask">
    </div>

В Firefox 86 версии не отображает ничего (цветной прямоугольник невиден). Однако, если встроить svg в html, то обрезка работает.

Пример:

html:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">

    <svg width="0" height="0">
        <defs>
            <clipPath id="mymask">
                <path transform="translate(0.000000,163.000000) scale(0.100000,-0.100000)" d="M373 1197 c-355 -355 -363 -363 -363 -402 0 -39 8 -47 363 -402 355
    -355 363 -363 402 -363 39 0 47 8 402 363 355 355 363 363 363 402 0 39 -8 47
    -363 402 -355 355 -363 363 -402 363 -39 0 -47 -8 -402 -363z" />
            </clipPath>
        </defs>
    </svg>

</head>

<body>
    <div class="svgMask">
    </div>
</body>
</html>

css:

.svgMask {
    width: 200px;
    height: 200px;
    background-color: #1265F3;
    clip-path:url(#mymask); 
}

Аналогичная ситуация с масками (mask-image свойство).

Собственно, вопрос: как заставить работать свойство clip-path с отдельными svg-файлами?

БЛОГ НА HUSL

Не работает обрезка/маска при указании отдельного файла svg через url

Ответы (0 шт):