{"id":27205,"date":"2024-11-24T08:35:47","date_gmt":"2024-11-24T00:35:47","guid":{"rendered":"https:\/\/fwq.ai\/blog\/27205\/"},"modified":"2024-11-24T08:35:47","modified_gmt":"2024-11-24T00:35:47","slug":"%e5%a6%82%e4%bd%95%e5%88%a9%e7%94%a8-svg-%e5%ae%9e%e7%8e%b0%e4%b8%8d%e8%a7%84%e5%88%99%e8%bf%9b%e5%ba%a6%e6%9d%a1%e7%9a%84%e5%8a%a8%e6%80%81%e6%95%88%e6%9e%9c%ef%bc%9f-2","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/27205\/","title":{"rendered":"\u5982\u4f55\u5229\u7528 SVG \u5b9e\u73b0\u4e0d\u89c4\u5219\u8fdb\u5ea6\u6761\u7684\u52a8\u6001\u6548\u679c\uff1f"},"content":{"rendered":"

\"\u5982\u4f55\u5229\u7528<\/p>\n

\u524d\u7aef\u4e0d\u89c4\u5219\u8fdb\u5ea6\u6761\u7684\u5b9e\u73b0\u601d\u8def\uff1a<\/p>\n

\u5bf9\u4e8e\u4e0d\u89c4\u5219 svg \u5143\u7d20\u8fdb\u5ea6\u6761\u7684\u9700\u6c42\uff0c\u6709\u4e24\u79cd\u53ef\u884c\u7684\u65b9\u6848\uff1a<\/p>\n

\u65b9\u6848\u4e00\uff1a\u52a8\u6001\u5207\u56fe<\/strong><\/p>\n

\u8be5\u65b9\u6848\u57fa\u4e8e\u5207\u56fe\u5b9e\u73b0\uff0c\u5c06 svg \u5207\u5206\u4e3a\u591a\u5f20\u56fe\u7247\uff0c\u7136\u540e\u6839\u636e\u8fdb\u5ea6\u663e\u793a\u4e0d\u540c\u7684\u56fe\u7247\u3002\u867d\u7136\u8fd9\u79cd\u65b9\u6cd5\u6bd4\u8f83\u7c97\u66b4\uff0c\u4f46\u5b9e\u73b0\u7b80\u5355\u3002<\/p>\n

\u65b9\u6848\u4e8c\uff1a\u52a8\u6001\u4fee\u6539 svg<\/strong><\/p>\n

\u8be5\u65b9\u6848\u901a\u8fc7 js \u8fde\u7eed\u4fee\u6539 svg \u7684\u8499\u7248\u9ad8\u5ea6\u548c\u586b\u5145\u989c\u8272\u6765\u5b9e\u73b0\u8fdb\u5ea6\u6761\u6548\u679c\u3002\u8fd9\u79cd\u65b9\u6cd5\u53ef\u4ee5\u4fdd\u6301 svg \u7684\u5b8c\u6574\u6027\uff0c\u5b9e\u73b0\u7684\u8fdb\u5ea6\u6761\u4e5f\u66f4\u52a0\u5e73\u6ed1\u3002\u4f46\u662f\uff0c\u8fd9\u79cd\u65b9\u6cd5\u5bf9 svg \u7684\u7ed3\u6784\u6709\u8981\u6c42\uff0csvg \u7684\u8499\u7248\u5fc5\u987b\u662f\u77e9\u5f62\u5e76\u4e14\u53ef\u4ee5\u63a7\u5236\u9ad8\u5ea6\u3002<\/p>\n

\u5b9e\u73b0\u601d\u8def\uff08\u65b9\u6848\u4e8c\uff09\uff1a<\/strong><\/p>\n

    \n
  1. \u627e\u5230\u5e76\u4fee\u6539\u8499\u7248\u7684\u9ad8\u5ea6\uff08height\uff09\uff0c\u8be5\u9ad8\u5ea6\u51b3\u5b9a\u4e86\u8fdb\u5ea6\u6761\u7684\u9ad8\u5ea6\uff0c\u901a\u8fc7 js \u63a7\u5236\u53d8\u91cf\u5373\u53ef\u5b9e\u73b0\u52a8\u6001\u9ad8\u5ea6\u3002<\/li>\n
  2. \u4fee\u6539\u586b\u5145\u8272\uff08fill\uff09\uff0c\u627e\u5230\u9700\u8981\u4fee\u6539\u7684\u533a\u57df\uff08\u5982\u6c34\u5854\uff09\uff0c\u7136\u540e\u5c06\u989c\u8272\u6539\u4e3a\u9700\u8981\u7684\u989c\u8272\u3002<\/li>\n<\/ol>\n

    svg \u4ee3\u7801\u793a\u4f8b\uff1a<\/strong><\/p>\n

    <svg width=\"120\" height=\"120\" viewBox=\"0 0 120 120\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n  <path d=\"M28 17.4163C28 15.4606 28 14.4828 28.3154 13.6374C28.5941 12.8904 29.0474 12.2209 29.6375 11.6847C30.3053 11.0779 31.2131 10.7147 33.0289 9.98845L53 2H67L86.9711 9.98845C88.7869 10.7147 89.6947 11.0779 90.3625 11.6847C90.9526 12.2209 91.4059 12.8904 91.6846 13.6374C92 14.4828 92 15.4606 92 17.4163V78L71.3137 98.6863C67.3535 102.646 65.3735 104.627 63.0902 105.368C61.0817 106.021 58.9183 106.021 56.9098 105.368C54.6265 104.627 52.6465 102.646 48.6863 98.6863L28 78V17.4163Z\" fill=\"#ECECEC\"\/>\n  <path d=\"M28 17.4163C28 15.4606 28 14.4828 28.3154 13.6374C28.5941 12.8904 29.0474 12.2209 29.6375 11.6847C30.3053 11.0779 31.2131 10.7147 33.0289 9.98845L53 2H67L86.9711 9.98845C88.7869 10.7147 89.6947 11.0779 90.3625 11.6847C90.9526 12.2209 91.4059 12.8904 91.6846 13.6374C92 14.4828 92 15.4606 92 17.4163V78L71.3137 98.6863C67.3535 102.646 65.3735 104.627 63.0902 105.368C61.0817 106.021 58.9183 106.021 56.9098 105.368C54.6265 104.627 52.6465 102.646 48.6863 98.6863L28 78V17.4163Z\" stroke=\"#C7C7C7\"\/>\n  <mask id=\"mask0_123_2793\" style=\"mask-type:alpha\" maskUnits=\"userSpaceOnUse\" x=\"28\" y=\"2\" width=\"64\" height=\"104\">\n    <rect width=\"64\" height=\"104\" transform=\"matrix(1 0 0 -1 28 106)\" fill=\"white\"\/>\n  <\/mask>\n  <g mask=\"url(#mask0_123_2793)\">\n    <path d=\"M28 17.4163C28 15.4606 28 14.4828 28.3154 13.6374C28.5941 12.8904 29.0474 12.2209 29.6375 11.6847C30.3053 11.0779 31.2131 10.7147 33.0289 9.98845L53 2H67L86.9711 9.98845C88.7869 10.7147 89.6947 11.0779 90.3625 11.6847C90.9526 12.2209 91.4059 12.8904 91.6846 13.6374C92 14.4828 92 15.4606 92 17.4163V78L71.3137 98.6863C67.3535 102.646 65.3735 104.627 63.0902 105.368C61.0817 106.021 58.9183 106.021 56.9098 105.368C54.6265 104.627 52.6465 102.646 48.6863 98.6863L28 78V17.4163Z\" fill=\"#06CB60\"\/>\n  <\/g>\n<\/svg><\/pre>\n
      \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
    \u5728\u8fd9\u4e2a svg \u4e2d\uff0c\u53ef\u4ee5\u901a\u8fc7\u4fee\u6539 mask \u5143\u7d20\u4e2d rect \u7684 height \u5c5e\u6027\u6765\u63a7\u5236\u8fdb\u5ea6\u6761\u9ad8\u5ea6\uff0c\u5e76\u901a\u8fc7\u4fee\u6539 path \u5143\u7d20\u7684 fill \u5c5e\u6027\u6765\u63a7\u5236\u8fdb\u5ea6\u6761\u989c\u8272\u3002<\/p>\n
    \u4ee5\u4e0a\u5c31\u662f\u5982\u4f55\u5229\u7528 SVG \u5b9e\u73b0\u4e0d\u89c4\u5219\u8fdb\u5ea6\u6761\u7684\u52a8\u6001\u6548\u679c\uff1f\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
    \u524d\u7aef\u4e0d\u89c4\u5219\u8fdb\u5ea6\u6761\u7684\u5b9e\u73b0\u601d\u8def\uff1a \u5bf9\u4e8e\u4e0d\u89c4\u5219 svg \u5143\u7d20\u8fdb\u5ea6\u6761\u7684\u9700\u6c42\uff0c\u6709\u4e24\u79cd\u53ef\u884c\u7684\u65b9\u6848\uff1a \u65b9\u6848\u4e00\uff1a\u52a8\u6001\u5207\u56fe \u8be5\u65b9\u6848\u57fa\u4e8e\u5207\u56fe\u5b9e\u73b0\uff0c\u5c06 svg \u5207\u5206\u4e3a\u591a\u5f20\u56fe\u7247\uff0c\u7136\u540e\u6839\u636e\u8fdb\u5ea6\u663e\u793a\u4e0d\u540c\u7684\u56fe\u7247\u3002\u867d\u7136\u8fd9\u79cd\u65b9\u6cd5\u6bd4\u8f83\u7c97\u66b4\uff0c\u4f46\u5b9e\u73b0\u7b80\u5355\u3002 \u65b9\u6848\u4e8c\uff1a\u52a8\u6001\u4fee\u6539 svg \u8be5\u65b9\u6848\u901a\u8fc7 js \u8fde\u7eed\u4fee\u6539 svg \u7684\u8499\u7248\u9ad8\u5ea6\u548c\u586b\u5145\u989c\u8272\u6765\u5b9e\u73b0\u8fdb\u5ea6\u6761\u6548\u679c\u3002\u8fd9\u79cd\u65b9\u6cd5\u53ef\u4ee5\u4fdd\u6301 svg \u7684\u5b8c\u6574\u6027\uff0c\u5b9e\u73b0\u7684\u8fdb\u5ea6\u6761\u4e5f\u66f4\u52a0\u5e73\u6ed1\u3002\u4f46\u662f\uff0c\u8fd9\u79cd\u65b9\u6cd5\u5bf9 svg \u7684\u7ed3\u6784\u6709\u8981\u6c42\uff0csvg \u7684\u8499\u7248\u5fc5\u987b\u662f\u77e9\u5f62\u5e76\u4e14\u53ef\u4ee5\u63a7\u5236\u9ad8\u5ea6\u3002 \u5b9e\u73b0\u601d\u8def\uff08\u65b9\u6848\u4e8c\uff09\uff1a \u627e\u5230\u5e76\u4fee\u6539\u8499\u7248\u7684\u9ad8\u5ea6\uff08height\uff09\uff0c\u8be5\u9ad8\u5ea6\u51b3\u5b9a\u4e86\u8fdb\u5ea6\u6761\u7684\u9ad8\u5ea6\uff0c\u901a\u8fc7 js \u63a7\u5236\u53d8\u91cf\u5373\u53ef\u5b9e\u73b0\u52a8\u6001\u9ad8\u5ea6\u3002 \u4fee\u6539\u586b\u5145\u8272\uff08fill\uff09\uff0c\u627e\u5230\u9700\u8981\u4fee\u6539\u7684\u533a\u57df\uff08\u5982\u6c34\u5854\uff09\uff0c\u7136\u540e\u5c06\u989c\u8272\u6539\u4e3a\u9700\u8981\u7684\u989c\u8272\u3002 svg \u4ee3\u7801\u793a\u4f8b\uff1a <svg width=”120″ height=”120″ viewBox=”0 0 120 120″ fill=”none” xmlns=”http:\/\/www.w3.org\/2000\/svg”> <path d=”M28 17.4163C28 15.4606 28 14.4828 28.3154 13.6374C28.5941 12.8904 29.0474 12.2209 29.6375 11.6847C30.3053 11.0779 31.2131 10.7147 33.0289 9.98845L53 2H67L86.9711 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[],"class_list":["post-27205","post","type-post","status-publish","format-standard","hentry","category-16"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/27205","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=27205"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/27205\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=27205"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=27205"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=27205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}