首页 文章

在SVG中绘制文本但删除背景

提问于
浏览 次
6

我正在使用一个看起来像this: (sorry that I have to post this as a link instead of as a picture, but as a new user I didn't have permissions to post images)的SVG元素

页面中间带圆角的边框，但在要插入页眉/页脚的位置删除边框的位置 . 用户指定的文本将插入页眉，页脚和框架本身 . 矩形被绘制在另一个背景（图片，另一个带有颜色的矩形等）的顶部 . 我需要找到一种方法来保持原始背景，仅绘制边框的一部分并将文本放在原始背景的顶部 .

我想出了这个解决方案：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 620 1100" preserveAspectRatio="xMidYMid meet">
    <defs>
        <!--Define some texts-->
        <text id="text1" x="90" y="100" style="text-anchor:start;font-size:30px;">THIS IS MY HEADER</text>
        <text id="text2" x="525" y="1010" style="text-anchor:end;font-size:30px;">MY TEXT HERE</text>

        <mask id="Mask1">
            <!--draw the entire screen-->
            <rect x="0" y="0" width="620" height="1100" style="fill:white;" />
            <!--Mask out the two rectangles where text is to be placed-->
            <rect x="300" y="980" width="350" height="50" style="fill:black;" />
            <rect x="90" y="90" width="350" height="40" style="fill:black;" />
        </mask>
    </defs>

    <!--The original background (here a rect with a fill color, but could also be an image)-->      
    <rect x="0" y="0" width="620" height="1100" style="fill:#f0ffb6"/>
    <!--Draw the rectangle but applying the mask-->
    <rect x="100" y="100" rx="20" ry="20" width="420" height="900" mask="url(#Mask1)" style="fill:none;stroke:green;stroke-width:5"/>

    <!--Draw the text-->                
    <use xlink:href="#text1" fill="black" stroke="black" stroke-width="1" />
    <use xlink:href="#text2" fill="black" stroke="black" stroke-width="1" />

    <text x="200" y="200">This text goes into the border</text>
</svg>

我现在的问题是掩码中的最后两个rects（不绘制边框的矩形）必须具有静态宽度 . 如果用户更改文本宽度，则用户还需要计算文本的新内容并更新这两个矩形 .

有没有办法屏蔽一个块与文本本身完全相同的宽度，并跳过掩码中的矩形 . 或者这是创建这种面具的唯一方法吗？如果有人"out there"有更好，更直观的方式来实现这种布局，我会非常有兴趣听取你的意见 .

谢谢你的帮助 .

svg

3 回答

  • 0

    没有脚本编写的svg文本的“删除背景”可以使用svg过滤器完成 .

    例如：

    <filter x="0" y="0" width="1" height="1" id="removebackground">
   <feFlood flood-color="blue"/>
   <feComposite in="SourceGraphic"/>
</filter>

    哪个文本可以像这样使用：

    <use xlink:href="#text1" fill="black" filter="url(#removebackground)"/>

    这将自动适应字符串宽度 . 如果需要一些填充，可以调整滤镜元素上的x，y，width，height属性 .

    嗯，再想一想，这可能不是你想要的 . 但是有可能适应上述情况 . 这是您使用此解决方案的文件：

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 620 1100" preserveAspectRatio="xMidYMid meet">
    <defs>
        <!--Define some texts-->
        <text id="text1" x="90" y="100" style="text-anchor:start;font-size:30px;">THIS IS MY HEADER</text>
        <text id="text2" x="525" y="1010" style="text-anchor:end;font-size:30px;">MY TEXT HERE</text>
        <filter x="0" y="0" width="1" height="1" id="removebackground">
            <feFlood flood-color="black"/>
        </filter>

        <mask id="Mask1">
            <!--draw the entire screen-->
            <rect x="0" y="0" width="620" height="1100" style="fill:white;" />
            <!--Mask out the two rectangles where text is to be placed-->
            <use xlink:href="#text1" filter="url(#removebackground)"/>
            <use xlink:href="#text2" filter="url(#removebackground)"/>
        </mask>
    </defs>

    <!--The original background (here a rect with a fill color, but could also be an image)-->      
    <rect x="0" y="0" width="620" height="1100" style="fill:#f0ffb6"/>
    <!--Draw the rectangle but applying the mask-->
    <rect x="100" y="100" rx="20" ry="20" width="420" height="900" mask="url(#Mask1)" style="fill:none;stroke:green;stroke-width:5"/>

    <!--Draw the text-->                
    <use xlink:href="#text1" fill="black" stroke="black" stroke-width="1" />
    <use xlink:href="#text2" fill="black" stroke="black" stroke-width="1" />

    <text x="200" y="200">This text goes into the border</text>
</svg>
    回复于
  • 18

    我认为一种简单的方法是将用户的文本用作具有大笔画宽度设置和黑色笔画的亮度蒙版 . 接下来，将文本正常放置在蒙版边框上 .

    回复于
  • 2

    您可以使用SVG DOM . 在 <use> 元素上调用getBBox将为您提供文本的边界框，然后您可以基于此设置蒙版的矩形尺寸 . 提供rects id属性将允许您引用它们并设置它们的尺寸 .

    顺便说一句，我不确定你为什么用 <use> 绘制文本而不是直接使用元素 .

    回复于

相关问题