将文本放入SVG包装器元素

时间:2019-08-24 16:20:27

标签: svg

我需要将文本(数字)放在包装纸或其他类似的东西中:

<g id="growth_badge" >
            <path d="M142.527,11.737c0,-0.334 -0.271,-0.605 -0.605,-0.605l-24.283,0c-0.334,0 -0.604,0.271 -0.604,0.605l0,10.188c0,0.334 0.27,0.605 0.604,0.605l9.728,0l2.089,2.378l2.561,-2.378l9.905,0c0.334,0 0.605,-0.271 0.605,-0.605l0,-10.188Z" style="fill:#bf5af0;"/>
            <path d="M123.885,15.718l1.21,2.18l-2.419,0l1.209,-2.18Z" style="fill:#fff;"/>
            <g height="200" width="200">
                <text class="counter" data-count="369" x="50" y="50" fill="red">0</text>    
            </g>

<!--            <path d="M128.639,17.1c0.158,0.028 0.287,0.105 0.386,0.229c0.098,0.124 0.147,0.276 0.147,0.455c0,0.12 -0.023,0.229 -0.071,0.326c-0.047,0.098 -0.114,0.18 -0.199,0.248c-0.086,0.068 -0.19,0.12 -0.313,0.157c-0.123,0.037 -0.261,0.056 -0.415,0.056c-0.195,0 -0.367,-0.031 -0.517,-0.094c-0.149,-0.063 -0.274,-0.154 -0.374,-0.275l0.292,-0.364c0.066,0.084 0.146,0.149 0.238,0.195c0.092,0.047 0.207,0.07 0.346,0.07c0.156,0 0.275,-0.031 0.357,-0.093c0.082,-0.061 0.123,-0.156 0.123,-0.284c0,-0.133 -0.048,-0.235 -0.142,-0.307c-0.095,-0.072 -0.239,-0.107 -0.431,-0.107l-0.107,0l0,-0.384l0.119,0c0.159,0 0.282,-0.036 0.369,-0.106c0.087,-0.07 0.13,-0.161 0.13,-0.271c0,-0.105 -0.036,-0.183 -0.107,-0.234c-0.072,-0.051 -0.165,-0.077 -0.281,-0.077c-0.117,0 -0.223,0.027 -0.316,0.081c-0.094,0.054 -0.17,0.129 -0.229,0.226l-0.323,-0.361c0.039,-0.058 0.09,-0.112 0.154,-0.159c0.064,-0.047 0.136,-0.088 0.217,-0.123c0.081,-0.034 0.168,-0.061 0.263,-0.08c0.095,-0.02 0.192,-0.029 0.292,-0.029c0.13,0 0.25,0.016 0.357,0.05c0.108,0.033 0.2,0.079 0.278,0.138c0.079,0.059 0.139,0.13 0.181,0.213c0.042,0.083 0.063,0.176 0.063,0.278c0,0.077 -0.011,0.15 -0.034,0.219c-0.023,0.069 -0.057,0.132 -0.1,0.188c-0.044,0.057 -0.095,0.104 -0.156,0.143c-0.06,0.038 -0.126,0.064 -0.197,0.076Z" style="fill:#fff;fill-rule:nonzero;"/> -->
<!--            <path d="M131.496,17.096c0,0.134 -0.026,0.258 -0.077,0.373c-0.051,0.115 -0.122,0.216 -0.211,0.301c-0.09,0.086 -0.196,0.153 -0.317,0.202c-0.122,0.049 -0.253,0.073 -0.394,0.073c-0.153,0 -0.292,-0.028 -0.416,-0.085c-0.125,-0.056 -0.23,-0.138 -0.317,-0.245c-0.087,-0.108 -0.154,-0.239 -0.2,-0.394c-0.046,-0.155 -0.069,-0.331 -0.069,-0.528c0,-0.248 0.024,-0.468 0.073,-0.658c0.049,-0.191 0.119,-0.351 0.211,-0.48c0.092,-0.13 0.204,-0.228 0.334,-0.294c0.131,-0.067 0.277,-0.1 0.438,-0.1c0.171,0 0.33,0.037 0.474,0.111c0.145,0.075 0.267,0.181 0.367,0.319l-0.296,0.323c-0.061,-0.098 -0.141,-0.173 -0.238,-0.227c-0.097,-0.054 -0.202,-0.081 -0.315,-0.081c-0.171,0 -0.308,0.068 -0.411,0.204c-0.102,0.136 -0.156,0.328 -0.161,0.576c0.054,-0.092 0.13,-0.165 0.229,-0.219c0.098,-0.054 0.213,-0.081 0.343,-0.081c0.133,0 0.258,0.023 0.375,0.07c0.116,0.046 0.217,0.11 0.303,0.192c0.086,0.081 0.153,0.178 0.202,0.289c0.048,0.112 0.073,0.231 0.073,0.359Zm-0.995,0.515c0.067,0 0.131,-0.013 0.192,-0.04c0.061,-0.027 0.115,-0.064 0.161,-0.112c0.046,-0.047 0.083,-0.102 0.11,-0.165c0.027,-0.062 0.04,-0.128 0.04,-0.198c0,-0.069 -0.013,-0.133 -0.04,-0.193c-0.027,-0.061 -0.064,-0.114 -0.11,-0.16c-0.046,-0.046 -0.099,-0.082 -0.159,-0.107c-0.06,-0.026 -0.125,-0.039 -0.194,-0.039c-0.069,0 -0.134,0.013 -0.196,0.039c-0.061,0.025 -0.115,0.061 -0.161,0.107c-0.046,0.046 -0.082,0.099 -0.108,0.16c-0.025,0.06 -0.038,0.124 -0.038,0.193c0,0.07 0.013,0.136 0.04,0.198c0.027,0.063 0.064,0.117 0.11,0.163c0.046,0.047 0.099,0.084 0.159,0.112c0.06,0.028 0.125,0.042 0.194,0.042Z" style="fill:#fff;fill-rule:nonzero;"/> -->
<!--            <path d="M131.772,16.762c0,-0.133 0.026,-0.257 0.077,-0.372c0.051,-0.115 0.121,-0.216 0.209,-0.302c0.088,-0.085 0.193,-0.152 0.315,-0.201c0.122,-0.049 0.253,-0.073 0.394,-0.073c0.153,0 0.292,0.028 0.416,0.084c0.124,0.057 0.23,0.139 0.317,0.246c0.087,0.108 0.154,0.239 0.202,0.394c0.047,0.155 0.071,0.331 0.071,0.528c0,0.248 -0.025,0.468 -0.075,0.658c-0.05,0.191 -0.121,0.351 -0.211,0.48c-0.091,0.13 -0.202,0.228 -0.333,0.294c-0.13,0.067 -0.276,0.1 -0.437,0.1c-0.172,0 -0.331,-0.037 -0.476,-0.111c-0.146,-0.075 -0.269,-0.181 -0.369,-0.319l0.296,-0.323c0.061,0.098 0.14,0.173 0.238,0.227c0.097,0.054 0.203,0.08 0.318,0.08c0.172,0 0.308,-0.067 0.409,-0.203c0.101,-0.136 0.155,-0.328 0.16,-0.576c-0.052,0.092 -0.127,0.165 -0.227,0.219c-0.1,0.054 -0.215,0.08 -0.345,0.08c-0.136,0 -0.262,-0.023 -0.377,-0.069c-0.115,-0.046 -0.215,-0.11 -0.299,-0.192c-0.085,-0.082 -0.151,-0.178 -0.2,-0.29c-0.049,-0.111 -0.073,-0.231 -0.073,-0.359Zm0.995,-0.514c-0.07,0 -0.134,0.013 -0.194,0.04c-0.06,0.027 -0.114,0.064 -0.16,0.112c-0.046,0.047 -0.082,0.102 -0.109,0.165c-0.027,0.062 -0.04,0.128 -0.04,0.197c0,0.07 0.013,0.134 0.04,0.194c0.027,0.06 0.063,0.114 0.107,0.16c0.045,0.046 0.098,0.082 0.16,0.107c0.061,0.026 0.126,0.039 0.196,0.039c0.069,0 0.134,-0.013 0.195,-0.039c0.062,-0.025 0.115,-0.061 0.16,-0.107c0.045,-0.046 0.08,-0.1 0.107,-0.16c0.027,-0.06 0.041,-0.124 0.041,-0.194c0,-0.069 -0.014,-0.135 -0.041,-0.197c-0.027,-0.063 -0.063,-0.117 -0.109,-0.164c-0.046,-0.046 -0.099,-0.083 -0.159,-0.111c-0.061,-0.028 -0.125,-0.042 -0.194,-0.042Z" style="fill:#fff;fill-rule:nonzero;"/> -->
            <path d="M134.679,16.405c-0.09,0 -0.173,-0.015 -0.25,-0.046c-0.076,-0.031 -0.143,-0.072 -0.199,-0.125c-0.057,-0.052 -0.101,-0.114 -0.135,-0.184c-0.033,-0.07 -0.05,-0.146 -0.05,-0.228c0,-0.08 0.017,-0.155 0.05,-0.227c0.034,-0.072 0.078,-0.133 0.135,-0.184c0.056,-0.051 0.123,-0.092 0.199,-0.123c0.077,-0.031 0.16,-0.046 0.25,-0.046c0.087,0 0.17,0.015 0.248,0.046c0.078,0.031 0.145,0.072 0.201,0.123c0.057,0.051 0.101,0.112 0.135,0.184c0.033,0.072 0.05,0.147 0.05,0.227c0,0.082 -0.017,0.158 -0.05,0.228c-0.034,0.07 -0.078,0.132 -0.135,0.184c-0.056,0.053 -0.123,0.094 -0.201,0.125c-0.078,0.031 -0.161,0.046 -0.248,0.046Zm0,-0.257c0.038,0 0.074,-0.009 0.106,-0.027c0.032,-0.018 0.06,-0.041 0.086,-0.071c0.026,-0.029 0.045,-0.064 0.059,-0.104c0.015,-0.039 0.022,-0.081 0.022,-0.124c0,-0.09 -0.027,-0.166 -0.081,-0.229c-0.054,-0.063 -0.118,-0.094 -0.192,-0.094c-0.038,0 -0.074,0.009 -0.106,0.027c-0.032,0.018 -0.06,0.042 -0.086,0.071c-0.026,0.029 -0.046,0.063 -0.06,0.102c-0.014,0.038 -0.021,0.079 -0.021,0.123c0,0.089 0.027,0.166 0.081,0.23c0.054,0.064 0.118,0.096 0.192,0.096Zm1.482,1.897c-0.089,0 -0.173,-0.015 -0.249,-0.046c-0.077,-0.031 -0.144,-0.072 -0.2,-0.123c-0.056,-0.051 -0.101,-0.112 -0.135,-0.182c-0.033,-0.071 -0.049,-0.147 -0.049,-0.229c0,-0.082 0.016,-0.158 0.049,-0.228c0.034,-0.071 0.079,-0.132 0.135,-0.185c0.056,-0.052 0.123,-0.094 0.2,-0.124c0.076,-0.031 0.16,-0.047 0.249,-0.047c0.09,0 0.173,0.016 0.25,0.047c0.077,0.03 0.144,0.072 0.201,0.124c0.058,0.053 0.103,0.114 0.135,0.185c0.032,0.07 0.048,0.146 0.048,0.228c0,0.082 -0.016,0.158 -0.048,0.229c-0.032,0.07 -0.077,0.131 -0.135,0.182c-0.057,0.051 -0.124,0.092 -0.201,0.123c-0.077,0.031 -0.16,0.046 -0.25,0.046Zm0,-0.257c0.039,0 0.074,-0.009 0.106,-0.027c0.032,-0.018 0.061,-0.042 0.086,-0.071c0.026,-0.03 0.046,-0.064 0.06,-0.102c0.014,-0.038 0.021,-0.079 0.021,-0.123c0,-0.046 -0.008,-0.089 -0.023,-0.129c-0.016,-0.039 -0.035,-0.074 -0.06,-0.103c-0.024,-0.03 -0.053,-0.053 -0.086,-0.069c-0.033,-0.017 -0.068,-0.025 -0.104,-0.025c-0.038,0 -0.073,0.009 -0.105,0.027c-0.032,0.018 -0.061,0.041 -0.087,0.071c-0.025,0.029 -0.045,0.064 -0.059,0.103c-0.014,0.04 -0.021,0.082 -0.021,0.125c0,0.09 0.026,0.166 0.08,0.229c0.054,0.062 0.118,0.094 0.192,0.094Zm-1.901,0.038l1.083,-1.263l0.999,-1.314l0.234,0.208l-1.048,1.24l-1.033,1.336l-0.235,-0.207Z" style="fill:#fff;fill-rule:nonzero;"/>
        </g>

带有class =“ counter”的数字必须在“%”之前的紫色徽章内,但要获取它确实很困难。 Codepen:https://codepen.io/trueweb/pen/mdbWyMW

1 个答案:

答案 0 :(得分:1)

浏览器具有HTML / SVG调试功能,通常可在Web开发人员或开发人员工具菜单中找到。您可以使用这些内容编辑网页。我使用工具来更改文本元素的x和y以及字体大小,直到正确的位置为止。

或者,您可以将SVG加载到诸如inkscape之类的编辑器中,然后在其中进行编辑。

<svg viewBox="100 0 200 100">
<g id="growth_badge" >
            <path d="M142.527,11.737c0,-0.334 -0.271,-0.605 -0.605,-0.605l-24.283,0c-0.334,0 -0.604,0.271 -0.604,0.605l0,10.188c0,0.334 0.27,0.605 0.604,0.605l9.728,0l2.089,2.378l2.561,-2.378l9.905,0c0.334,0 0.605,-0.271 0.605,-0.605l0,-10.188Z" style="fill:#bf5af0;"/>
            <path d="M123.885,15.718l1.21,2.18l-2.419,0l1.209,-2.18Z" style="fill:#fff;"/>
            <g height="200" width="200">
                <text class="counter" data-count="369" fill="red" font-size="5px" x="126" y="18">369</text>   
            </g>

            <path d="M134.679,16.405c-0.09,0 -0.173,-0.015 -0.25,-0.046c-0.076,-0.031 -0.143,-0.072 -0.199,-0.125c-0.057,-0.052 -0.101,-0.114 -0.135,-0.184c-0.033,-0.07 -0.05,-0.146 -0.05,-0.228c0,-0.08 0.017,-0.155 0.05,-0.227c0.034,-0.072 0.078,-0.133 0.135,-0.184c0.056,-0.051 0.123,-0.092 0.199,-0.123c0.077,-0.031 0.16,-0.046 0.25,-0.046c0.087,0 0.17,0.015 0.248,0.046c0.078,0.031 0.145,0.072 0.201,0.123c0.057,0.051 0.101,0.112 0.135,0.184c0.033,0.072 0.05,0.147 0.05,0.227c0,0.082 -0.017,0.158 -0.05,0.228c-0.034,0.07 -0.078,0.132 -0.135,0.184c-0.056,0.053 -0.123,0.094 -0.201,0.125c-0.078,0.031 -0.161,0.046 -0.248,0.046Zm0,-0.257c0.038,0 0.074,-0.009 0.106,-0.027c0.032,-0.018 0.06,-0.041 0.086,-0.071c0.026,-0.029 0.045,-0.064 0.059,-0.104c0.015,-0.039 0.022,-0.081 0.022,-0.124c0,-0.09 -0.027,-0.166 -0.081,-0.229c-0.054,-0.063 -0.118,-0.094 -0.192,-0.094c-0.038,0 -0.074,0.009 -0.106,0.027c-0.032,0.018 -0.06,0.042 -0.086,0.071c-0.026,0.029 -0.046,0.063 -0.06,0.102c-0.014,0.038 -0.021,0.079 -0.021,0.123c0,0.089 0.027,0.166 0.081,0.23c0.054,0.064 0.118,0.096 0.192,0.096Zm1.482,1.897c-0.089,0 -0.173,-0.015 -0.249,-0.046c-0.077,-0.031 -0.144,-0.072 -0.2,-0.123c-0.056,-0.051 -0.101,-0.112 -0.135,-0.182c-0.033,-0.071 -0.049,-0.147 -0.049,-0.229c0,-0.082 0.016,-0.158 0.049,-0.228c0.034,-0.071 0.079,-0.132 0.135,-0.185c0.056,-0.052 0.123,-0.094 0.2,-0.124c0.076,-0.031 0.16,-0.047 0.249,-0.047c0.09,0 0.173,0.016 0.25,0.047c0.077,0.03 0.144,0.072 0.201,0.124c0.058,0.053 0.103,0.114 0.135,0.185c0.032,0.07 0.048,0.146 0.048,0.228c0,0.082 -0.016,0.158 -0.048,0.229c-0.032,0.07 -0.077,0.131 -0.135,0.182c-0.057,0.051 -0.124,0.092 -0.201,0.123c-0.077,0.031 -0.16,0.046 -0.25,0.046Zm0,-0.257c0.039,0 0.074,-0.009 0.106,-0.027c0.032,-0.018 0.061,-0.042 0.086,-0.071c0.026,-0.03 0.046,-0.064 0.06,-0.102c0.014,-0.038 0.021,-0.079 0.021,-0.123c0,-0.046 -0.008,-0.089 -0.023,-0.129c-0.016,-0.039 -0.035,-0.074 -0.06,-0.103c-0.024,-0.03 -0.053,-0.053 -0.086,-0.069c-0.033,-0.017 -0.068,-0.025 -0.104,-0.025c-0.038,0 -0.073,0.009 -0.105,0.027c-0.032,0.018 -0.061,0.041 -0.087,0.071c-0.025,0.029 -0.045,0.064 -0.059,0.103c-0.014,0.04 -0.021,0.082 -0.021,0.125c0,0.09 0.026,0.166 0.08,0.229c0.054,0.062 0.118,0.094 0.192,0.094Zm-1.901,0.038l1.083,-1.263l0.999,-1.314l0.234,0.208l-1.048,1.24l-1.033,1.336l-0.235,-0.207Z" style="fill:#fff;fill-rule:nonzero;"/>
        </g>
        </svg>