如何在容器元素内正确缩放 SVG 蒙版？

问题描述 投票：0回答：1

我正在尝试将 SVG 蒙版应用于 

div
元素，但遇到蒙版无法随容器正确缩放的问题。遮罩似乎溢出容器，仅显示部分遮罩内容。我知道 SVG 是 4000 x 7000，但肯定有办法缩小，对吗？

在附图中，您可以看到普通的 SVG 以及如何用它制作蒙版（目标是使用蒙版应用渐变效果）。

您还可以在下面找到两个所示示例的代码：

简单的SVG：

<html>
    <head>   
        <style>
            body {
                background-color: beige;
            }

            .logo {
                width: 50%;
                max-width: 300px;
                min-width: 150px;
                z-index: 10;
                aspect-ratio: 4.5;
                margin: 10px 0 25px;
            }

            .wrapper {
                width: 100%;
                display: flex;
                align-items: center;
                flex-direction: column;
            }

            .scale {
                width: 30px;
                height: 30px;
                border: 1px solid black;
                font-size: 15;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7000 4000">
                <path d="M 3000,3000 L 5000,0 L 7000,3000 Z" />
                <path d="M 2000,3000 L 0,0 L 4000,0 Z"/>
            </svg>
            <div class="scale">
                30px
            </div>
        </div>
    </body>
</html>

遮罩渐变：

<html>
    <head>   
        <style>
            body {
                background-color: beige;
            }

            .logo {
                width: 50%;
                max-width: 300px;
                min-width: 150px;
                z-index: 10;
                aspect-ratio: 4.5;
                margin: 10px 0 25px;
            }

            svg {
                position: absolute;
            }

            .wrapper {
                width: 100%;
                display: flex;
                align-items: center;
                flex-direction: column;
            }

            @keyframes logoGradientAnimation {
                0%   { background-position:  100%; }
                100% { background-position: -100%; }
            } 

            .gradient {
                height: 100%;
                width: 100%;
                object-fit: cover;
                -webkit-mask-image: url(#logo-mask);
                mask-image: url(#logo-mask);
                background: linear-gradient(135deg, black 60%, #ea3c96, black 75%);
                animation: 3s cubic-bezier(.25,.50,.75,.50) infinite logoGradientAnimation;
                background-size: 200%;
                mask-size: contain;
            }

            mask > path {
                fill: white !important;
            }

            .scale {
                width: 30px;
                height: 30px;
                border: 1px solid black;
                font-size: 15;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7000 4000">
                <defs>
                    <mask id="logo-mask">
                        <path d="M 3000,3000 L 5000,0 L 7000,3000 Z" />
                        <path d="M 2000,3000 L 0,0 L 4000,0 Z"/>
                    </mask>
                </defs>
            </svg>
            <div class="logo">
                <div class="gradient">
                </div>
            </div>
            <div class="scale">
                30px
            </div>
        </div>
    </body>
</html>

我尝试将 SVG 的宽度和高度设置为 100%，还尝试设置 

maskUnits
和 
maskContentUnits
，但蒙版仍然溢出 
.logo
容器。如何确保遮罩与其所应用的元素正确缩放？

非常欢迎任何建议！

html css svg responsive-design masking
1个回答
0
投票

显然， 

mask-size
属性对内联 SVG 引用没有影响。

作为解决方法，您可以将蒙版 SVG 转换为数据 URL：

mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7000 4000'><path d='M 3000 3000 L 5000 0 L 7000 3000 Z'/><path d='M 2000 3000 L 0 0 L 4000 0 Z' /></svg>");


body {
  background-color: beige;
}

.logo {
  width: 50%;
  max-width: 300px;
  min-width: 150px;
  z-index: 10;
  aspect-ratio: 7/4;
  margin: 10px 0 25px;
  position: relative;
}

.wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.gradient {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7000 4000'><path d='M 3000 3000 L 5000 0 L 7000 3000 Z'/><path d='M 2000 3000 L 0 0 L 4000 0 Z' /></svg>");
  background: linear-gradient(135deg, black 60%, #ea3c96, black 75%);
  animation: 3s cubic-bezier(0.25, 0.5, 0.75, 0.5) infinite logoGradientAnimation;
  background-size: 200%;
  mask-size: cover;
  mask-repeat: no-repeat;
}

.scale {
  width: 30px;
  height: 30px;
  border: 1px solid black;
  font-size: 15;
}

@keyframes logoGradientAnimation {
  0% {
    background-position: 100%;
  }
  100% {
    background-position: -100%;
  }
}
<div class="wrapper">
  <div class="logo">
    <div class="gradient">
    </div>
  </div>
  <div class="scale">
    30px
  </div>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.