[SVG样式缩放样式而不被切断

Posted 2021-05-03

我正在尝试扩展svg模式的方法，以使模式不会因使用该模式而受到元素边界的限制。但是，这种模式正在不断重复以覆盖该元素。

假设我有一个半径为20px的圆作为图案。将其应用于80px宽度元素：

现在元素将被缩放到90px，该模式应水平拉伸（无需保持纵横比）：

最后，放大到90px以上会增加另一个圆的出现（在此示例中为95px的宽度-宽高比仍被忽略）：

我可以添加一些脚本来实现该效果。但是我很好奇我是否可以使用纯SVG来获得这种行为。

<svg style='display: block; height: 60px; width: 95px; '>
    <defs>
        <pattern patternUnits='userSpaceOnUse' viewBox='0 0 20 20' width='20'  height='20' id='the_pattern'>
            <circle cx='10' cy='10' r='10' stroke-width='0' fill='black'></circle>
        </pattern>
    </defs>

    <rect x='0' y='0' width='80' height='20' fill='url(#the_pattern)'></rect>
    <rect x='0' y='20' width='90' height='20' fill='url(#the_pattern)'></rect>
    <rect x='0' y='40' width='95' height='20' fill='url(#the_pattern)'></rect>

</svg>

答案

想法

您在2次传递中设置了容器元素的尺寸。

Pass 1：将容器元素的宽度设置为该值，以使所需数量的图案元素正好适合水平放置。前两个案例为80，最后一个案例为100。

Pass 2：将容器元素水平缩放到实际目标宽度（80，90，95）。

在下面的代码示例中，transform属性指定缩放比例。请注意，translate动词在应用缩放之前首先将元素位置移至原点，然后将其转换为平移（“ translate”属性内的动词从右向左评估）。

x缩放因子是目标宽度与指定宽度的商，y保持高度不变。

SVG样本] >>

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="8cm" height="4cm" viewBox="0 0 800 500" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
    <defs>
        <pattern id="circlePattern" patternUnits="userSpaceOnUse"
             x="0" y="0" width="20" height="20"
        >
            <circle cx="10" cy="10" r="10" fill="black" stroke="black" stroke-width="0"/>
        </pattern> 
    </defs>

    <!-- 1. base case 80 px width -->
    <rect fill="url(#circlePattern)" stroke="white" stroke-width="0"
           x="100" y="200" width="80" height="20"
    />

    <!-- 2. scale width to 90px -->
    <rect fill="url(#circlePattern)" stroke="white" stroke-width="0" 
           x="100" y="300" width="80" height="20"
           transform="translate(100, 300) scale (1.125, 1.0) translate(-100, -300)"
    />

    <!-- 3. scale width to 95px -->
    <rect fill="url(#circlePattern)" stroke="white" stroke-width="0" 
           x="100" y="400" width="100" height="20"
           transform="translate(100, 400) scale (0.95, 1.0) translate(-100, -400)"
    />
</svg>
Inline Sample

与该问题有关的SVG部分与上述相同。

.showcase {
  /*  background-image: url('#glyph');
    background-size:100% 100%;*/
    filter: url(#embedded);
}
.showcase:before {
   display:block;
   content:'';
   color:transparent;
}
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
   "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="embedded" width="16cm" height="8cm" viewBox="0 0 800 500" version="1.1"
    xmlns="http://www.w3.org/2000/svg"
>
    <defs>
        <pattern id="circlePattern" patternUnits="userSpaceOnUse"
            x="0" y="0" width="20" height="20"
        >
            <circle cx="10" cy="10" r="10" fill="black" stroke="black" stroke-width="0"/>
        </pattern> 
    </defs>

    <!-- 1. base case 80 px width -->
    <rect fill="url(#circlePattern)" stroke="white" stroke-width="0"
        x="100" y="200" width="80" height="20"
    />

    <!-- 2. scale width to 90px -->
    <rect fill="url(#circlePattern)" stroke="white" stroke-width="0" 
         x="100" y="300" width="80" height="20"
         transform="translate(100, 300) scale (1.125, 1.0) translate(-100, -300)"
    />

    <!-- 3. scale width to 95px -->
    <rect fill="url(#circlePattern)" stroke="white" stroke-width="0" 
         x="100" y="400" width="100" height="20"
         transform="translate(100, 400) scale (0.95, 1.0) translate(-100, -400)"
    />
</svg>
<div id="showcase"/>

另一答案

答案为否。使用纯SVG无法实现。除非使用“纯SVG”，否则您将包括已嵌入javascript（即<script>元素）的SVG。

以上是关于[SVG样式缩放样式而不被切断的主要内容，如果未能解决你的问题，请参考以下文章

工具提示需要溢出：自动容器而不被切断[重复]

CSS 样式转换与 svg 转换

动态调整单个形状的大小而不缩放整个 SVG

inline svg - 如何将浏览器默认样式应用于foreignObject中的xhtml？

Angular 2 创建的 Svg 无法缩放

是否可以使用 CSS 缩放内联 SVG？ [复制]