使用SVG文字制作多行填充效果的最佳方法是什么?

时间:2019-09-23 21:17:41

标签: javascript css svg

我希望文本具有被“着色”的效果(就像用蜡笔为图片着色一样)。我创建了SVG polyfill行,但该行是如此之大,以至于占用了大量空间,并且我不想每次有人尝试访问我的网站时都使浏览器崩溃。我在想我应该创建一个框,使文本整齐地适合框内,然后通过函数运行CSS或JavaScript以自动生成折线来填充框,但是我不确定如何去做。我对屏蔽很熟悉,我只是在寻找一种不会占用大量浏览器资源的生成屏蔽的方法。

<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="80 35 80 200">
<g fill="#0075cc" >
  <path id="design" d="M91.52 45.889q-.025-.068 0-.195.025-.136.025-.297 0-.169-.025-.364-.017-.194.025-.321-.042-.195-.05-.424-.009-.237-.051-.44-.017-.068-.009-.144.017-.085-.042-.127.025-.144.008-.355-.008-.22-.05-.314-.017-.186-.009-.406.009-.22-.05-.39-.128-.033-.314-.017-.178.017-.296.094-.017-.144-.034-.356-.009-.212-.026-.406 0-.051-.008-.11l-.017-.127q0-.068.017-.11.017-.051.068-.077.042-.017.076.034.042.042.042.102.026 0 .026-.043 0-.042.033-.059.254-.025.56-.025.304-.009.617.008l.051-.025q.026-.009.068-.009.22.043.49.017.28-.025.602-.042.381 0 .779.042.406.043.821.076.06.085.153.11.101.017.194.06.085.042.187.101.11.051.211.11.22.127.373.28.152.152.296.347.093.102.136.229.05.118.11.237.093.186.17.355.075.161.135.39l.033.144q.026.067.043.135v.33q.017.068.017.136.008.068.025.11.017.042.034.127.025.085-.034.144 0 .17-.025.347-.026.17-.068.339-.017.059-.025.127 0 .059-.017.101-.017.06-.06.119-.034.05-.05.11-.034.06-.043.127-.008.06-.034.118-.059.119-.169.204-.102.084-.144.203-.127.067-.22.16-.093.094-.195.178-.101.017-.203.068-.102.042-.212.085-.11.042-.237.076-.118.025-.262 0-.043.042-.144.042-.102-.008-.22.017-.017 0-.034.009-.009.008-.026.008-.016 0-.008-.008.008-.009-.009-.009-.169.017-.347.043-.169.017-.347 0-.06 0-.118-.009-.06-.017-.127-.017h-.898q-.118.017-.22.034-.102.009-.203-.034-.06.017-.127.026-.06.008-.102-.026-.042-.017-.067.017-.017.026-.043.026-.068-.06-.178-.026-.101.026-.203.026-.06 0-.127-.009-.068-.017-.127.025-.093-.025-.27-.017-.179.017-.322 0-.06-.059-.051-.127.017-.067.017-.16 0-.161-.017-.348-.017-.194 0-.397.059.033.059.008.009-.034.068-.008 0 .008-.017.008-.009 0-.017-.008.101 0 .254-.009.16-.008.322.009.059 0 .101-.009.051-.017.068.009.017 0 .017.008 0 .009.017.009zm1.058-3.971q.06 0 .093-.034 0-.06.085-.102.085-.042.144-.076-.017-.017-.034-.008-.008.008-.025-.009h.076q0-.042.017-.05.017-.018.034-.018h.034q.025 0 .033-.025 0-.017-.016-.017h-.009q.017-.034.05-.034.035 0 .052-.025-.026-.009-.017-.017.008-.017.034-.026.025-.017.05-.025.026-.017.043-.025.076-.06.152-.144.085-.085.153-.127-.017-.017-.034-.009-.017.009-.017-.008-.322.287-.703.541-.381.254-.737.525-.042.043-.118.094-.068.05-.127.076-.06.042-.119.076-.059.034-.093.076-.017.017-.008.034.008.009-.009.025h-.042q-.017-.008-.017.017.042.043.034.077-.009.033.008.076.068-.043.085-.085.017-.05.102-.068.033-.025.008-.042-.017-.017.017-.034.017 0 .025.017.009.009.026.009 0-.043-.017-.06.101-.017.135-.076.034-.06.136-.06.017-.025-.017-.033-.034-.009-.009-.025l.085-.034q.05-.017.034-.06.042 0 .06-.017.025-.025.05-.042 0 .042.025.042-.017-.042-.017-.05.009-.009.017-.009.017 0 .026.009.017 0 .025-.026h-.017q-.017 0-.017-.025.068 0 .102-.05.042-.06.127-.077l-.017.017q.025-.034.05-.026.026 0 .01-.033zm.72-.762h-.11q-.009 0-.017.008-.009.009-.009.026-.27.194-.516.398-.237.203-.508.389-.135.085-.262.17-.119.084-.22.177-.043.026-.11.06-.068.033-.043.093.042.016.05-.009.01-.034.026-.05.136-.06.195-.136.068-.076.212-.136l.033-.05q.017-.026.077-.009-.017-.068.017-.06.033 0 .059-.016-.017-.026.025-.051.043-.025.068-.025-.009-.017.042-.051l.102-.068q.06-.034.093-.06.042-.033.017-.05.05-.025.076 0 .06-.06.127-.102.076-.042.136-.101h-.009q-.008 0-.008-.026h.067q.034-.008-.008-.033h.076q0-.017-.017-.026-.017-.017.017-.017.085-.025.144-.11.06-.093.178-.135zm-1.11.838q.043 0 .043-.034-.042 0-.042.034zm1.212-.517h-.017q-.009 0-.009-.017.076-.084.22-.152.144-.068.203-.152-.067 0-.143.05-.068.043-.127.085-.06.042-.102.093-.042.051-.102.093-.118.102-.237.195-.11.093-.228.186.135-.067.237-.16.11-.094.228-.178 0 .017-.017.017-.008 0-.008.017.034-.017.06-.034l.041-.043zm-.788.576q.042-.008.076-.034.034-.025.06-.05.025-.034.059-.051.034-.026.076-.017 0-.017-.025-.043-.144.094-.246.195zm.229-.762q0-.034.059-.05.06-.026.076-.085h-.152q-.017.025-.026.05 0 .026-.033.026-.322.262-.66.5-.331.228-.661.474 0 .033.008.059.017.017.017.06.034 0 .051.016.042-.068.06-.102.025-.033.1-.033 0-.026.069-.077l.101-.076q.068-.06.144-.085.076-.033.119-.11-.017 0-.026.009-.008.008-.008-.009.042 0 .059-.025.017-.025.076-.008-.017-.026-.008-.043.017-.017.034-.025.025-.009.033-.017.017-.009-.008-.034.135-.042.186-.102.06-.067.161-.127-.025 0-.017-.008.009-.017.026-.026l.042-.025q.025-.008.042.009 0-.06.051-.085.06-.034.085-.05zm-2.04-.025q.042 0 .05-.017.017-.017.042-.034-.025-.017-.042-.025-.008-.017-.05-.017zm.761-.051q.034-.034.009-.042-.026-.009-.026.017h.009v.008l.008.017zm.864.093q-.119.093-.229.17-.11.076-.194.177.118-.042.203-.144.093-.101.237-.144.025-.076.084-.11.068-.042.127-.084-.101 0-.143.05l-.085.085zm1.177.288q-.017 0-.017-.009v-.008q.042 0 .06-.025l.033-.051q0 .017.025.017l.034-.068q.026-.034.093-.05.043-.069.127-.11.085-.052.127-.12h-.093q-.203.136-.39.297-.177.152-.38.28-.026.042-.06.092.043 0 .034-.025 0-.034.026-.034.093.017.127-.025.034-.051.127-.051-.043 0-.043-.017.017 0 .034.017.026.017.026-.017h-.009q-.008 0-.008-.017.025-.017.042-.034.025-.025.068-.042-.009.008 0 .017h.034q.008-.009-.017-.017zm-2.134.093q.127-.042.203-.144.085-.101.212-.144.034-.068.11-.101.076-.034.102-.11-.085.016-.136.076-.05.059-.11.118-.203.161-.415.297-.203.135-.39.296.077.025.12-.009.05-.033.084-.076.034-.042.05-.067.026-.026.052 0 .033-.034.067-.06.034-.034.051-.076zm.093.152q.043 0 .051.009.017 0-.008-.025.059 0 .067-.06.009-.059.085-.059v-.05q.06 0 .093-.026.034-.034.076-.051-.017-.042.026-.042.042 0 .084-.017.017-.093.068-.136.06-.042.127-.076.06-.034.068-.06l.042-.058h-.05q-.094.059-.17.135l-.135.136q-.17.127-.34.245-.168.119-.312.254.042 0 .05.017.009.017.026.034 0-.042.034-.06.034-.016.076-.033-.017-.017 0-.034l.042-.043zm2.735-.651q-.203.177-.423.338-.22.161-.44.33.126-.042.211-.084.093-.051.186-.119.077-.034.136-.068l.118-.084q.017 0 .017.008 0 .009.017-.008.043-.076.161-.136.127-.067.186-.152-.042-.017-.076-.017-.025-.008-.093-.008zm-2.794.025q-.025.008-.025.017h.042q.008 0-.017-.017zm3.133.017q-.22.186-.474.322-.246.127-.483.287.102.017.16-.008.06-.034.128-.05.042-.069.127-.11.084-.052.178-.094.093-.119.211-.178.127-.06.229-.152-.017-.017-.076-.017zm-3.53.06q.016 0 .033-.01.025-.016.025-.033-.059 0-.059.042zm.135.033q.016 0 .033-.017l.043-.042q-.034-.017-.06.017-.016.025-.016.042zm-.424.229q.043-.085.136-.119.093-.034.135-.127-.042.025-.093.05l-.085.052q-.042.025-.076.059-.025.034-.017.085zm.805-.153q.059.017.067-.017.017-.042.043-.059l-.06.042-.05.034zm3.318-.034q-.169.161-.38.263-.212.093-.382.254.043-.017.06 0t.034.017q.093-.119.228-.17.144-.059.229-.152.034.017.034.009 0-.009.025-.009.034-.093.11-.119.076-.033.119-.076 0-.017-.077-.017zm-3.53.077q.025-.017.05-.017.026-.009.026-.043-.034 0-.05.026-.01.017-.026.034zm2.938.169q-.085.06-.178.11-.093.05-.16.118.16-.067.287-.152.135-.093.262-.186.043-.017.094-.051.059-.034.059-.068-.085.06-.178.119l-.186.11zm-3.21-.212q-.024.009-.024.017.008.009.016.009h.026q.008-.009-.017-.026zm.136.043q.043 0 .043-.043-.043 0-.043.043zm.271.033q.017.034.034.009.026-.034.026-.06-.026.018-.06.051zm3.59-.033q-.16.16-.38.254-.212.093-.407.237.076.025.144.017.067-.017.118-.051.06-.034.102-.076.042-.051.076-.077.06-.042.152-.084.094-.043.136-.085.017-.017.008-.025-.008-.017.009-.034t.05-.026q.035-.017.052-.034-.026-.016-.06-.016zm-4.335.245q.034.009.051-.008l.042-.043q.017-.025.034-.034.017-.017.043.009.017-.042.05-.068l.068-.068q-.076.017-.152.085-.068.068-.136.127zm.55-.212q-.042.026-.033.026.008-.009.025-.017.017-.009.026-.009.016-.008-.017 0zm3.955.026q-.17.152-.373.28-.195.126-.432.21.076 0 .102.052.025.042.093.042.093-.042.16-.11.069-.068.162-.093.042-.119.135-.119.042-.067.119-.118.076-.051.152-.11-.034 0-.06-.009-.025-.008-.058-.025zm-3.836.05q-.042-.016-.101.034-.06.043-.077.085-.067.009-.118.05-.043.043-.093.086-.051.042-.11.076-.06.034-.136.017-.017.025-.025.05-.009.017-.009.043h.136q0-.085.042-.102.05-.017.11-.05.026-.026.068-.051.042-.034.06-.06 0 .017-.01.017-.008 0-.008-.017.093-.033.161-.084.068-.051.11-.093zm3.929.153q-.17.135-.339.246-.16.101-.305.22.017.017.026.017.017 0 .033.017.085-.017.136-.077.05-.059.144-.076v-.034q.008-.025.025-.025h.051q.034-.017.025-.026 0-.016.017-.033.102-.085.204-.136.11-.06.194-.144-.059-.06-.118-.017-.051.043-.093.068zm-3.548.042q-.017.026.009.043.034.008.05-.026-.059 0-.016-.017.042-.017.067 0-.017-.025 0-.042t.034-.017q.017-.008.026-.008.016-.009 0-.026-.068.017-.102.051-.025.025-.068.042zm3.361.44q.06-.101.187-.101 0-.06.059-.085.068-.034.093-.067l.017.017q.009.008.025.008v-.06q.06 0 .094-.05.042-.05.101-.085-.034-.017-.034-.034 0-.025-.042-.025-.195.16-.406.305-.204.144-.415.27 0 .043.008.068.009.017.009.051 0-.059.034-.059.033 0 .059-.017-.017-.017 0-.025.025-.009.042-.017.026-.009.034-.009.009-.008-.017-.025.068 0 .076-.026l.034-.05q.017 0 .017.008.009.009.025.009zm-3.454-.347q.025 0 .042-.016.017-.026.034-.043h-.042q.017.043-.017.043-.034-.009-.017.016zm-.102.06q.06 0 .102-.043-.034-.025-.06 0l-.042.043zm4.183-.043q-.186.17-.415.305-.229.127-.457.271.017.034.025.068.017.034.051.05 0-.042-.025-.042.076-.059.144-.093.067-.034.127-.093.118 0 .152-.06.042-.067.135-.092 0-.034.026-.043.025-.008.068-.042.059-.025.127-.076.076-.051.118-.11-.017-.017-.025-.034-.009-.026-.051-.009zm-2.769.026q-.245.186-.55.398-.305.203-.593.423-.067.042-.144.102-.067.059-.127.101-.059.034-.076.085-.017.05.026.093.017 0 .017-.017 0-.025.016-.042.026.017.043.008l.034-.034q.017-.025.034-.042.025-.017.059-.008.034-.034.034-.043.008-.017.008-.034.068 0 .085-.033.017-.034.05-.06h.01q.008 0 .025-.025.008-.009.025-.017.034-.017.05-.017.018-.06.068-.068.06-.017.085-.05.017-.017.009-.026 0-.008.034-.008l.025-.017q0-.009.025-.043h.06q.017-.025.017-.042.008-.017.025-.034.025-.025.068-.042.05-.026.067-.051.026 0 .034-.017.009-.017.043 0 .017-.034.008-.042-.008-.017.009-.017.11-.068.186-.161t.228-.11q-.016-.06.009-.05.034 0 .017-.043-.017 0-.026-.009 0-.008-.016-.008zm-1.464.076q.025.017.025 0 .009-.025.025-.042-.025 0-.05.008-.017 0 0 .034zm0 .034q-.068-.026-.06.008.017.034.06-.008zm3.911.44q.068-.085.161-.152.102-.068.22-.11-.017-.043.051-.068.076-.034.102-.093-.06-.026-.119.034-.05.05-.093.084-.068.043-.127.077-.06.025-.119.059l-.254.17q-.127.084-.245.152h-.034q-.017-.009 0 .016.025.017.017.043 0 .025.042.06.026-.026.068-.06l.076-.076q.043-.043.076-.06.043-.025.06 0 .034-.017.042-.05.017-.043.076-.026zm-3.209 4.259q.043-.06.102-.093.06-.043.118-.068.06-.025.11-.06.051-.033.094-.1.127-.06.22-.145.093-.084.211-.127.017-.042.051-.06.043-.016.068-.033.034-.034.05-.068.018-.034.043-.067.017 0 .017-.009.009-.008.025-.008.127.017.28.025.152 0 .27-.025.077.101.162.059.093-.05.169-.076.068-.034.127-.051.068-.026.135-.068.068-.042.119-.093l.093-.093q.119-.034.17-.119.059-.093.152-.152.101-.22.16-.457.06-.237.094-.483 0-.152.008-.322.009-.169-.008-.262-.034-.136-.085-.28-.042-.152-.11-.296-.06-.068-.076-.118-.025-.068-.06-.127l-.05-.136q-.034-.034-.042-.076 0-.042-.017-.06-.043-.092-.119-.152-.076-.067-.076-.152-.026-.034-.076-.042-.043-.017-.077-.034-.016-.017-.033-.043-.009-.033-.026-.05-.118-.077-.28-.119-.152-.042-.312-.042-.187-.017-.381.008-.195.026-.398.068-.187.16-.458.339-.262.177-.482.33l-.161.144q-.068.068-.144.11-.05.034-.119.076-.059.034-.11.076-.05.043-.076.102-.017.05.026.127.067-.017.101-.05.043-.043.085-.103.017 0 .008.009-.008.008.009.008.034-.067.11-.084t.102-.085q.059 0 .076-.034.017-.042.076-.042.017-.042.025-.068.017-.034.093-.05.017-.026.026-.051.017-.034.05-.06.026 0 0 .017-.025.017.035.017 0-.025.025-.042.034-.026.034-.068l.034.017.042-.017q.034-.085.119-.118.093-.043.11-.11l.033.016.043-.016q.042-.077.11-.136l.135-.118q-.017-.068.026-.094.05-.025.093-.042.06.093.076.212.025.118.017.254-.009.127-.025.27-.009.136-.009.263 0 .161.017.33.025.17.042.339 0 .06-.008.127-.009.06.008.119.017.118.043.22.034.101.034.22v.313q.008.152-.026.296.017.034.034.043.025.008.009.05 0 .034-.026.043-.017 0-.034.017 0 .06.017.11.026.042.043.085-.043.042-.051.11-.009.067-.009.144v.152q.009.076-.017.127-.305.186-.592.38-.288.187-.56.382zm-.82-4.64h.033q.025 0 .025-.042-.059 0-.059.042zm.592.398q0 .009.008.009.009 0 .009-.009.034 0 .059-.034.034-.042.076-.06.017 0 .017.01 0 .008.017-.01h-.017q-.017 0-.017-.016.026-.017.076-.025.051-.009.094-.068 0-.017.016-.042.017-.026.06 0 .059-.051.059-.094.034 0 .034.009.008.008.025-.009-.042 0 0-.017.043-.025 0-.042-.169.144-.355.263-.178.11-.33.27.067-.016.084-.059.026-.042.085-.076zm.305-.152q0-.017.016-.009.026 0 .026-.025-.017 0-.05.008-.026.009.008.026zm3.268.347q.042-.068.118-.11.076-.051.144-.085.034-.042.119-.093.093-.06.11-.152-.017-.017-.017-.06h-.034q-.22.195-.474.339-.246.144-.466.313.042-.017.042.017 0 .026.017.042-.017 0-.042-.025.017.042.025.068.017.017.034.05.093-.042.153-.11.067-.067.152-.101-.025-.017.017-.017.042-.008 0-.042.034 0 .05-.017.018-.017.052-.017zm.55-.305q-.06.06-.127.119-.06.05-.119.11-.169.127-.372.245-.195.11-.339.271.043-.017.034.034 0 .042.026.042.016-.034.042-.042.034-.009.034-.034.118-.042.228-.127.11-.093.212-.127-.017 0 .017-.017.042-.017.025-.034h.051q.026-.008.026-.025-.043 0-.043-.017.06 0 .085-.009.025-.008.068-.025 0-.034-.009-.034l-.025-.025q.084-.034.135-.076.06-.051.144-.077l-.034-.084q-.017-.051-.059-.068zm-3.878.804q.034-.017.051-.05.017-.034.05-.051.018-.017.043-.017.034 0 .051-.017.017-.017.009-.034-.009-.025.008-.025.017-.017.06-.017l.042-.043q.025-.034.067-.034.093-.135.229-.228.135-.102.178-.229-.407.254-.77.56-.356.295-.737.583.017.076.034.085.025.008.042-.009.025-.016.05-.042.035-.025.077-.017 0-.025-.009-.034-.008-.008-.008-.025.076 0 .093-.017-.025 0 .025-.034.06-.008.094-.042l.067-.068q.034-.042.068-.068.034-.034.093-.05-.025-.017-.025-.026.008-.008.025-.017.026-.008.05-.008.026-.009.043-.026zm-.567-.44q.06-.034.085-.06.025-.025.084-.058-.067.016-.11.05-.034.026-.059.068zm4.064.381q0-.034-.008-.034-.009-.008-.009-.025.042 0 .06-.026.016-.033.075-.033 0-.017.009-.026 0-.008.008-.008.06-.034.11-.085.06-.05.12-.093.041-.026.1-.06.068-.033.068-.093-.245.136-.508.305-.254.17-.5.33-.016.043 0 .068.018.017.018.043.101-.026.135-.11.026.008.034 0l.026-.017q.008-.017.016-.026.017-.008.06 0-.017-.05 0-.06.025-.008.042-.008h.034q.008 0-.025-.025.084 0 .076-.009-.009-.016.059-.008zm-3.725.474q.059-.025.101-.034.043-.008.068-.025-.017 0 0-.025.025-.034.042.008.017-.042-.025-.025-.034.008-.017-.034.042 0 .068-.009.025-.017.042-.034.017-.025.034-.033.025-.017.068-.017-.026-.051.025-.077.042 0 .034-.008 0-.009.06.008.025-.059.084-.101.068-.043.085-.085.016 0 .016.009.009.008.026.008.042-.101.127-.16.085-.06.152-.145 0-.034.009-.076.008-.042-.009-.06-.347.297-.694.585-.347.28-.754.525-.016.06 0 .085.017.025.017.084.06-.042.102-.076.05-.042.11-.076h-.008q-.009 0-.009-.017.102-.034.152-.085.051-.05.094-.11zm-.534-.669q.043-.059.076-.076.034-.025.094-.093l-.119.068q-.068.042-.05.101zm4.2.483q-.034 0-.034-.042.025 0 .042-.009.026-.008.068.009-.025-.068.025-.06.06 0 .093-.017-.025-.008-.016-.025.008-.017.033-.034.026-.017.051-.025.026-.017.043-.026.042-.093.177-.152.136-.068.212-.16-.017-.018-.025-.043-.009-.034-.034-.034-.22.203-.491.355-.263.144-.508.34 0 .041.008.067.017.017.017.042.042-.017.102-.05.067-.034.067-.06-.008.009.009 0 .025-.008.05-.025.035-.017.06-.026l.05-.025zm-.305.262l.034.068q.025.026.025.085.17-.085.305-.186.135-.102.27-.178h-.016q-.008 0-.008-.017.016 0 .042.008.034 0 .034-.025-.017-.034.017-.017.042.017.059 0l.025-.042q.017-.017.051-.017.017-.017.034-.051.017-.034.05-.068.018-.017.043-.017.034 0 .034-.017.008 0 .008-.017 0-.008-.008-.025.017-.017.025-.008.009.008.026.008.017-.025.017-.06.008-.033.008-.05t-.042-.06q-.229.204-.491.365-.254.16-.542.321zm-3.192.017q.076-.017.119-.084.042-.068.118-.068.017-.025.034-.06.025-.033.06-.016-.018 0-.018.017 0 .008.017.008.127-.101.22-.203.102-.102.271-.16-.017-.035 0-.069.017-.033-.017-.05-.313.304-.685.541-.365.238-.729.508 0 .043.017.06.017.008-.017.042.06-.034.094-.068.042-.042.101-.067-.042 0-.042-.017.025.008.06-.009.033-.017.067-.042.034-.026.06-.051.024-.025.041-.034.06-.017.077-.042.017-.034 0-.051.059.017.067-.017.009-.042.051-.025 0 .017-.017.025-.008 0-.025.017.042 0 .05-.034.01-.034.026-.05zm-.584.56q.017.067.017.11v.1q.084-.042.144-.11.059-.075.16-.1 0-.018.017-.043.017-.026.017-.051.017 0 .026.009.017.008.034.008.034-.06.059-.068.025-.008.06-.067.042-.017.075-.06l.077-.076q.017-.017.033-.017.026 0 .043-.017.025-.017.042-.042.026-.034.05-.05.018-.018.043-.026.034-.017.051-.034.017-.017.025-.051.017-.034.034-.05.043-.06.102-.094.068-.034.11-.093.06 0 .068.025.017.017.042.034.042-.034.076-.127.043-.101-.017-.144-.313.288-.694.525-.372.237-.694.508zm4.58-.763q-.186.119-.38.229-.195.11-.382.228V44q.085-.059.178-.118.102-.06.16-.127l.026.025q.009.009.034.009.034-.026.017-.034-.017-.009-.017-.042.043.042.043.008.008-.034.05-.025 0 .017-.017.017t-.017.042q.026-.034.06-.06.042-.025.076-.059-.017 0-.034.026-.008.017-.008-.026.033 0 .05-.008.026-.009.043-.009 0-.042.025-.042.026 0 .034-.017.017-.017.06 0 0-.06.016-.06.119-.041.203-.1.085-.068.102-.204-.085.042-.16.119-.069.076-.162.135zm-4.106-.152q.017.017.034-.009.017-.034-.017-.034 0 .017-.009.026-.008 0-.008.017zm4.03.533q.017-.017.06-.068.042-.059.11-.025.059-.093.135-.135.076-.043.17-.102 0-.025-.01-.042-.008-.017-.008-.051-.068.034-.127.084-.05.043-.118.085-.144.093-.314.186-.16.094-.321.178-.068.043-.161.093-.085.043-.102.161.127-.06.28-.127.16-.076.237-.16.017 0 .017.008t.017.008q0-.034-.017-.034.084 0 .101-.05.017-.051.051-.009zm-3.878.534q.077-.026.11-.06.043-.042.068-.076l.068-.068q.042-.042.118-.067.017-.026.009-.026-.009-.008.008-.025.06-.017.085-.051.025-.034.068-.068.017-.017.034-.017.025 0 .042-.017v-.059q.102-.101.212-.135v-.093q0-.034-.043-.06-.254.263-.525.508-.262.246-.575.449-.034.042-.127.11l-.161.102q.017.042 0 .093-.009.042.017.06 0-.018.008-.01.017.01.034.01 0-.043-.017-.052-.008-.008.034-.025 0 .034.017.034.06-.043.102-.093.042-.06.127-.06.017-.042.025-.076.017-.042.034-.076.025.017.008.034-.008.008.009.025.06-.042.068-.084.017-.051.084-.034 0-.017-.017-.034.043 0 .06-.017.017-.026.033-.026-.016 0-.016-.016zm3.785-.23q-.05 0-.025-.041.042 0 .059-.017.127-.068.288-.178.169-.11.288-.246-.094 0-.153.051l-.118.085q-.229.144-.475.28-.245.126-.482.253.017.043-.009.093-.017.043.009.06.042-.068.093-.085.05-.025.144-.042-.06 0-.025-.026.042-.034.059-.017-.009.009-.017.009-.009.008 0 .008.06-.025.06-.076h.075q.043-.008 0-.034.017 0 .034.017.026.009.043-.017-.043 0-.043-.017.043-.034.093-.05.06-.026.102-.009zm-3.361-.397q.05 0 .05-.042-.025 0-.033.017 0 .008-.017.025zm-.102.093q.017-.017.042-.017.034 0 .034-.042-.042 0-.05.017-.009.008-.026.042zm-.152.11q-.195.161-.39.305t-.406.27q0 .018.017.035.017.017 0 .042.067 0 .093-.042.034-.043.076-.076.093-.026.152-.085.06-.068.119-.144 0 .025.034.025.068-.101.17-.16.11-.068.177-.17.06-.017.068-.05.017-.034.042-.06-.093.06-.152.11zm2.98.652q0 .06-.009.093-.008.034-.025.076.042-.016.042-.025.009-.008.068-.008v-.077q.05-.008.085-.034.042-.025.076-.05.034-.026.068-.043.042-.025.101-.025.017-.034.051-.06.034-.033.06 0 .033-.033.016-.042-.017-.017.026-.017.152-.127.313-.237.17-.11.313-.237.034.017.051.017.017-.008.042.017 0-.06-.008-.06-.009-.008.008-.05-.296.22-.626.398-.33.178-.652.364zm-3.607.347q.06-.017.085-.034.025-.025.068-.008.025-.017.008-.025-.017-.017.009-.034.016.017.042.008.034-.017.06-.034.025-.025.025-.042t-.034-.009q.093-.016.144-.059.059-.042.084-.068h-.017q-.017 0-.017-.025.034-.008.06-.025l.05-.051q.026-.026.051-.034.034-.017.068 0 .017-.034.034-.042.025-.017.025-.034.043 0 .06-.017.025-.026.042-.051.017-.025.034-.042t.05-.009q-.033 0-.033.017.076 0 .034-.076.093-.017.118-.076.034-.06.136-.076.008-.034.025-.051l.05-.051q.026-.025.035-.05.017-.035 0-.094-.373.288-.712.584-.33.297-.736.542 0 .034-.009.068 0 .025.043.025.042-.042.101-.068.068-.025.11-.084-.025-.017-.05.017-.017.034-.043.008zm3.624.11q.042 0 .05-.025.018-.034.051-.05.043-.043.094-.052.05-.017.076-.042.017-.017.017-.025.008-.017.025-.034.026-.017.05-.017.035 0 .06-.017.017-.017.017-.034.009-.025.042-.042.017-.017.034-.017.026-.009.043-.026.118-.084.245-.211.136-.127.229-.17 0-.034.042-.059l.085-.068q.05-.034.084-.067.034-.043.017-.094-.296.246-.635.466-.338.212-.702.415l-.051.135q-.026.06-.042.153l.076-.06q.034-.025.076-.042-.017.017-.009.043.009.025.026 0-.026-.017-.009-.026.026-.017.009-.034zm-2.328-.914q-.017.025-.043.034-.017.008-.034.025.043 0 .06.017l.033.034q-.313.364-.685.652-.373.28-.78.533.018.043 0 .068-.008.017.018.034.059-.06.135-.093.085-.034.11-.119.06 0 .085-.025.034-.026.06-.05.025-.035.058-.069.034-.034.102-.05.017-.043.05-.068.043-.034.11-.009.018-.059.043-.059.026-.008.068-.034.017-.034 0-.042-.017-.009 0-.034.085 0 .118-.068.034-.067.127-.067.094-.119.195-.204.11-.093.229-.177-.017-.094-.017-.136 0-.05-.042-.093zm2.81.779q.034-.034.094-.076.067-.043.135-.077.068-.042.127-.076.06-.034.085-.05h-.017q.118-.06.203-.136.085-.085.178-.152 0-.034.008-.068.009-.034-.008-.05-.297.295-.652.532-.068.06-.153.11-.084.051-.118.12.017-.043.06-.06.042-.017.058-.017zm-3.691.042q0-.042-.017-.06.042 0 .06-.008.016-.016.025-.033.017-.017.034-.026.017-.017.059-.008-.017-.017-.009-.017.009 0 .026.017 0-.026-.009-.034-.008-.009-.008-.026.084-.025.118-.076.034-.05.127-.093-.008 0-.008-.008 0-.009.008-.009 0 .009.009.009.017 0 .025-.009-.017-.042-.008-.034.017 0 .05.017 0-.05.034-.085.034-.033.077-.059l.076-.06q.034-.033.042-.084-.296.254-.626.474-.322.22-.652.44.017.043.008.094 0 .05.026.076l.093-.093q.05-.051.118-.076-.017-.043 0-.051.017-.009.034 0h.034q.017-.009-.009-.042.034 0 .034.016 0-.042.026-.05.034-.009.05-.026-.016 0 .009-.025.034-.034.05-.034 0 .017-.008.025-.008 0 .009.017 0-.034.017-.025.025.008.042.025-.017-.059-.025-.076 0-.017.059.017zm3.522-.398q.026 0 .026-.008.008-.017.025-.034-.025 0-.034.017 0 .008-.017.025zm-3.827 1.067q0-.017-.008-.025-.009-.017-.009-.034.06 0 .076-.043.026-.042.119-.033.025-.085.102-.119.084-.042.127-.11h.059q0-.042.017-.042t.034-.017q.033-.017.033-.034.009-.026.026-.042.06-.026.101-.051.043-.034.068-.009 0-.025-.008-.025-.009-.009.008-.026.017 0 .034-.016.017-.026.042-.009.077-.119.187-.186l.237-.136q-.017-.025-.009-.067.017-.043-.008-.043-.364.288-.737.567-.364.271-.77.517.017.034.017.068.008.034.033.05-.025 0-.042-.008-.008-.009-.008.025.059-.017.135-.067.076-.06.144-.085zm.483-.364q.034 0 .034-.042-.034 0-.034.042zm.897 1.448h.153q.025-.043.093-.076.076-.034.118-.077.043-.017.051-.025.009-.008.042.009.068-.102.17-.144.11-.043.228-.102-.017 0 .026-.042.042-.017.101-.034.068-.017.068-.076.017 0 .034.025.025.025.042-.009-.034.017-.034-.025 0-.05.034-.034.026.017.051.009.034-.017.06.017-.018-.043.016-.051.034-.009.009-.051.144-.025.186-.06h-.042q-.017 0-.017-.016.042-.026.085-.009.05.009.093-.05-.017-.026-.043.008-.025.034-.05-.008.042 0 .059-.017.025-.026.068 0 .033 0 0-.009-.034-.017-.017-.05.025-.01.059-.01.034 0 .068-.008.033-.008.05-.017.017-.017-.008-.042.076-.017.085-.025.016-.009.11-.026-.017 0-.06-.042.102-.025.17-.093.067-.076.152-.093.017-.043.102-.077.084-.042.11-.101.034-.017.042 0 .017.008.034-.017.076-.085.195-.17l.237-.169q.127-.084.237-.17.118-.084.195-.177-.398.288-.83.55-.424.254-.864.508-.432.254-.855.517-.423.262-.813.559zm1.126-.584q0 .042.026.033.034-.016.034-.033-.034 0-.034.008 0 " />
  </g>

1 个答案:

答案 0 :(得分:0)

我不知道您是如何在Codepen中创建完整的SVG的,但是有点疯狂。首先,那个巨大的面具甚至没有在任何地方使用-因此您可以删除它。其次,您是通过使用极其复杂的填充而不是实际使用笔触来创建笔触。创建“混乱”填充的方法比较简单-通常使用过滤器。

https://www.smashingmagazine.com/2015/05/why-the-svg-filter-is-awesome/

是使用过滤器创建自定义填充的良好概述。在您的特定情况下,您需要创建一个对角线图案,然后使用feTurbulence / feDisplacement Map组合使其稍微变形,然后裁剪到文本轮廓。