{"id":2097,"date":"2024-02-01T17:00:07","date_gmt":"2024-02-01T09:00:07","guid":{"rendered":"https:\/\/www.yusian.com\/blog\/?p=2097"},"modified":"2024-02-02T09:47:57","modified_gmt":"2024-02-02T01:47:57","slug":"%e5%a6%82%e4%bd%95%e5%9c%a8html%e4%b8%ad%e4%bd%bf%e7%94%a8svg%e5%88%b6%e4%bd%9c%e4%b8%80%e4%b8%aa%e7%a8%8e%e5%8a%a1%e7%ab%a0","status":"publish","type":"post","link":"https:\/\/www.yusian.com\/blog\/h5\/2024\/02\/01\/1700072097.html","title":{"rendered":"\u5982\u4f55\u5728HTML\u4e2d\u4f7f\u7528SVG\u5236\u4f5c\u4e00\u4e2a\u7a0e\u52a1\u7ae0"},"content":{"rendered":"

\u5148\u770b\u6548\u679c\u56fe<\/h2>\n

\"\"<\/p>\n

\u5b9e\u73b0\u4ee3\u7801<\/h2>\n
<!DOCTYPE html>\n<html>\n<head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    <title>Invoice<\/title>\n    <style>\n        .invoice-tip {\n          text-anchor: middle;\n          font-size: 20mm;\n          fill: red;\n          font-family: KaiTi;\n        }\n    <\/style>\n<\/head>\n<body>\n<div class=\"invoice\">\n  <svg viewBox=\"0,0,900,600\">\n\n    <!-- \u5916\u73af -->\n    <path d=\"M15 300 a435 284 0 1 1 0 1 z\"\n          fill=\"none\"\n          stroke=\"red\"\n          stroke-width=\"30\">\n    <\/path>\n    <path d=\"M40 300 a410 260 0 1 1 0 1 z\"\n          fill=\"none\"\n          stroke=\"red\"\n          stroke-width=\"3\">\n    <\/path>\n\n    <!-- \u4e0a\u534a\u6587\u5b57 -->\n    <path d=\"M140 300 A310 160 0 0 1 760 300 \"\n          fill=\"none\"\n          stroke-width=\"1\"\n          id=\"circle-top\">\n    <\/path>\n    <text class=\"invoice-tip\">\n      <textPath xlink:href=\"#circle-top\" startOffset=\"50%\">\n        \u5168\u56fd\u7edf\u4e00\u53d1\u7968\u76d1\u5236\u7ae0\n      <\/textPath>\n    <\/text>\n\n    <!-- \u4e2d\u95f4\u6587\u5b57 -->\n    <path d=\"M0 350 L900 350\" id=\"mid-line\"><\/path>\n    <text class=\"invoice-tip\">\n      <textPath xlink:href=\"#mid-line\" startOffset=\"50%\">\n        \u56fd\u5bb6\u7a0e\u52a1\u603b\u5c40\n      <\/textPath>\n    <\/text>\n\n    <!-- \u4e0b\u534a\u5f27\u6587\u5b57 -->\n    <path d=\"M80 300 A370 220 1 0 0 820 300 \"\n          fill=\"none\"\n          stroke-width=\"1\"\n          id=\"circle-bottom\">\n    <\/path>\n    <text class=\"invoice-tip\">\n      <textPath xlink:href=\"#circle-bottom\" startOffset=\"50%\">\n        \u6e56\u5357\u7701\u7a0e\u52a1\u5c40\n      <\/textPath>\n    <\/text>\n  <\/svg>\n<\/div>\n<\/body>\n<\/html>\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
How to generate a stamp using SVG in HTML<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24],"tags":[25,434,436,435],"class_list":["post-2097","post","type-post","status-publish","format-standard","hentry","category-h5","tag-html","tag-svg","tag-436","tag-435"],"_links":{"self":[{"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/posts\/2097","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/comments?post=2097"}],"version-history":[{"count":0,"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/posts\/2097\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/media?parent=2097"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/categories?post=2097"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/tags?post=2097"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}