主页 / 问题 / 856506
Accepted
ioprst
Asked:2020-07-17 13:56:02 +0000 UTC2020-07-17 13:56:02 +0000 UTC

svg 文本填充超出字符边界

  • 772

请告诉我，有什么问题（或者我不明白）。有 SVG

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   height="100%"
   style="background:#FFFFFF"
   version="1.1"
   viewBox="0 0 1024 1024"
   width="100%"
   id="svg59"
   sodipodi:docname="Auto.svg"
   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)">
  <metadata
     id="metadata63">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs id="defs32">
    <style type="text/css" id="style9">
    .default_default {
      fill: #808080;
      stroke: #000000;
      stroke-width: 0.5px;
    }
</style>
    <filter height="1" id="filter.808080" width="1" x="0" y="0">
      <feFlood flood-color="#808080"/>
      <feComposite
         in="SourceGraphic"/>
    </filter>
    <filter height="1" id="filter.FF00FF" width="1" x="0" y="0">
      <feFlood flood-color="#FF00FF"/>
      <feComposite in="SourceGraphic"/>
    </filter>
  </defs>
  <g id="root" transform="translate(0,0)">
    <text id="c9_5_1_text_0" transform="translate(576,384)" fill="#000000" font-family="Times New Roman" font-size="22pt" filter="url(#filter.808080)">
      <tspan x="0" dy="0em" id="tspan52">Test</tspan>
    </text>
    <text id="c5_3_1_text_0" transform="translate(320,256)" fill="#000000" font-family="Times New Roman" font-size="36pt" filter="url(#filter.FF00FF)">
      <tspan x="0" dy="0em" id="tspan55">0</tspan>
    </text>
  </g>
</svg>

文本在编辑器中打开时显示如下：

在此处输入图像描述

将 svg 添加到页面：

<iframe frameborder="0" marginwidth="0" marginheight="0" src="Auto.svg" id="AutoId"></iframe>

加载页面时，它filter不是沿边框填充文本，而是更多（明显是上方和下方）：

在此处输入图像描述

html

1 个回答

  1. Best Answer

    原因在过滤器参数中

    对对象进行过滤动作的范围称为 -过滤效果区域

    width="X%"这是一个矩形，总尺寸height="Y%"在过滤器定义中指定 filter id="filter.808080">

    也可以给出左上角的坐标региона действия фильтра——x="X%" y="Y%"

    如果未指定所有这些参数，则它们将默认为：

    x="-10%",y="-10%" width="120%" height="120%"

    因此，您的支持比符号更宽svg

    为这些选项指定值以提供所需的颜色底图外观：

    我选择了以下值，您可以根据自己的喜好重新配置它们： 

    <filter  id="filter.808080"  x="10%" y="10%"  height="75%" width="90%">

    您的示例如下。

    我通过svg 优化器运行文件以删除不必要的服务信息Inkscape 

    <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height="100%" version="1.1" viewBox="0 0 1024 1024" width="100%"  background="#FFFFFF">
        <defs>
    <style type="text/css" id="style9">
      
    .default_default {
      fill: #808080;
      stroke: #000000;
      stroke-width: 0.5px;
    }

    </style>
      <filter  id="filter.FF00FF"  x="10%" y="12%"  height="70%" width="90%">
      <feFlood flood-color="#FF00FF"/>
      <feComposite in="SourceGraphic"/>
    </filter>
	 
	 <filter  id="filter.808080"  x="10%" y="10%"  height="75%" width="90%">
      <feFlood flood-color="#808080"/>
      <feComposite in="SourceGraphic"/>
    </filter>
  
  </defs>
  <g id="root" transform="translate(0,0)">
    <text id="c9_5_1_text_0" transform="translate(576,384)" fill="#000000" font-family="Times New Roman" font-size="22pt" filter="url(#filter.808080)">
      <tspan x="0" dy="0em" id="tspan52">
        Test
      </tspan>
    </text>
    <text id="c5_3_1_text_0" transform="translate(320,256)" fill="#000000" font-family="Times New Roman" font-size="36pt" filter="url(#filter.FF00FF)">
      <tspan x="0" dy="0em" id="tspan55">
        0
      </tspan>
    </text>
  </g>
</svg>

    • 2

相关问题