在SVG中绘制文本,但删除背景
我正在使用一个SVG元素,它应该看起来像在SVG中绘制文本,但删除背景,svg,Svg,我正在使用一个SVG元素,它应该看起来像 页中间的圆角边框,但其中边框或页脚要插入的边界被移除。用户指定的文本将插入页眉、页脚和框架本身。矩形绘制在另一个背景(图片、另一个带颜色的矩形等)上。我需要找到一种保持原始背景的方法,只绘制部分边框,并将文本置于原始背景之上 我提出了以下解决方案: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" widt
页中间的圆角边框,但其中边框或页脚要插入的边界被移除。用户指定的文本将插入页眉、页脚和框架本身。矩形绘制在另一个背景(图片、另一个带颜色的矩形等)上。我需要找到一种保持原始背景的方法,只绘制部分边框,并将文本置于原始背景之上
我提出了以下解决方案:<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>
<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>
这是我的头球
我的文本在这里
这段文字进入了边界
我现在的问题是掩码中的最后两个矩形(不绘制边框的矩形)必须具有静态宽度。如果用户更改文本宽度,用户还需要计算文本的新宽度,并更新这两个矩形
是否有一种方法可以遮罩出与文本本身宽度完全相同的块,并跳过遮罩中的矩形。或者这是制作这种面具的唯一方法?如果有人“在那里”有一个更好更直观的方式来实现这个布局,我会非常有兴趣听到你
感谢您的帮助。可以使用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>
<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>
<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>
这是我的头球
我的文本在这里
这段文字进入了边界
我认为影响这一点的一个简单方法是使用用户文本作为亮度遮罩,设置大笔划宽度&黑色笔划。接下来,将文本正常放置在遮罩的边框上。没有javascript,这比乍一看要复杂得多。这里有一个可能的解决方法,我担心如果不编写脚本,这将很困难。有没有其他方法可以在不使用遮罩的情况下达到类似效果?我一直在考虑使用带有stroke=“green”的textPath,并尝试调整笔划的开始位置,使绿线在文本之后开始。我可能会补充说,边框掩码应该由一个页面大小的白色矩形组成,超级粗体笔划文本为黑色,在边框中留下文本大小的空白,而无需编写脚本。这是实现我想要的效果的非常简单的方法。我从来没想过。虽然我认为Erik Dahlströms解决方案是“正确”的解决方案,但您的解决方案很可能就是我将使用的解决方案,因为事实证明,Adobe和iBooks等电子发布渲染器无法使用过滤器正常工作。一如往常,你将不得不放弃正确的,而做一些有用的黑客。编辑:因为我没有足够的声誉去投票“这个答案很有用”,有人能帮我吗?听起来很聪明;你有一个具体的例子给我们吗?注意:它没有发挥应有的作用,它使文本看起来有点“破碎”或“脆弱”。