- mongodb - 在 MongoDB mapreduce 中,如何展平值对象?
- javascript - 对象传播与 Object.assign
- html - 输入类型 ="submit"Vs 按钮标签它们可以互换吗?
- sql - 使用 MongoDB 而不是 MS SQL Server 的优缺点
<svg version="1.1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<g stroke="lightgray" stroke-dasharray="1,1" stroke-width="1" transform="scale(4, 4)">
<line x1="0" y1="0" x2="256" y2="256"></line>
<line x1="256" y1="0" x2="0" y2="256"></line>
<line x1="128" y1="0" x2="128" y2="256"></line>
<line x1="0" y1="128" x2="256" y2="128"></line>
</g>
<g transform="scale(1, -1) translate(0, -900)">
<style>
.stroke1 {fill: #BF0909;}
.stroke2 {fill: #BFBF09;}
.stroke3 {fill: #09BF09;}
.stroke4 {fill: #09BFBF;}
.stroke5 {fill: #0909BF;}
.stroke6 {fill: #BF09BF;}
.stroke7 {fill: #BFBFBF;}
.stroke8 {fill: #090909;}
</style>
<path class="stroke1" d="M 272 567 Q 306 613 342 669 Q 370 718 395 743 Q 405 753 400 769 Q 396 782 365 808 Q 337 827 316 828 Q 297 827 305 802 Q 318 769 306 741 Q 267 647 207 560 Q 150 476 72 385 Q 60 375 58 367 Q 54 355 70 358 Q 82 359 109 384 Q 155 421 213 493 Q 226 509 241 527 L 272 567 Z" fill="#BF0909"></path>
<path class="stroke2" d="M 241 527 Q 262 506 258 375 Q 258 374 258 370 Q 254 253 221 135 Q 215 114 224 80 Q 236 44 248 32 Q 267 16 279 44 Q 294 86 294 134 Q 303 420 314 485 Q 321 515 295 543 Q 289 549 272 567 C 251 589 227 553 241 527 Z" fill="lightgray"></path>
<path class="stroke3" d="M 521 560 Q 561 621 602 708 Q 620 751 638 773 Q 645 786 639 799 Q 633 811 602 830 Q 572 846 554 843 Q 535 839 546 817 Q 561 795 552 757 Q 513 619 407 448 Q 398 436 397 430 Q 394 418 409 423 Q 439 432 503 532 L 521 560 Z" fill="lightgray"></path>
<path class="stroke4" d="M 503 532 Q 527 510 555 520 Q 795 608 782 549 Q 783 543 743 468 Q 736 458 741 453 Q 745 447 756 459 Q 852 532 894 549 Q 904 552 905 561 Q 906 574 876 592 Q 852 605 828 621 Q 800 637 783 630 Q 686 590 521 560 C 492 555 479 550 503 532 Z" fill="lightgray"></path>
<path class="stroke5" d="M 568 72 Q 531 81 494 91 Q 482 94 483 86 Q 484 79 494 71 Q 569 7 596 -33 Q 611 -49 626 -36 Q 659 -3 661 82 Q 655 149 655 345 Q 656 382 667 407 Q 676 426 659 439 Q 634 461 604 470 Q 585 477 577 469 Q 571 462 582 447 Q 619 384 603 127 Q 597 82 589 74 Q 582 67 568 72 Z" fill="lightgray"></path>
<path class="stroke6" d="M 444 320 Q 419 262 385 208 Q 364 180 381 144 Q 388 128 409 139 Q 460 181 468 264 Q 472 295 467 319 Q 463 328 456 328 Q 449 327 444 320 Z" fill="lightgray"></path>
<path class="stroke7" d="M 738 307 Q 789 249 847 168 Q 860 146 876 139 Q 885 138 893 146 Q 908 159 900 204 Q 891 264 743 338 Q 734 345 731 332 Q 728 319 738 307 Z" fill="lightgray"></path>
</g>
</svg>
以及必须在其上绘制数字的每个图像的坐标列表(请参阅以下 svg 代码的文本元素)。问题是:当我添加需要的文本元素时,它们被垂直和水平翻转:
<svg version="1.1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<g stroke="lightgray" stroke-dasharray="1,1" stroke-width="1" transform="scale(4, 4)">
<line x1="0" y1="0" x2="256" y2="256"></line>
<line x1="256" y1="0" x2="0" y2="256"></line>
<line x1="128" y1="0" x2="128" y2="256"></line>
<line x1="0" y1="128" x2="256" y2="128"></line>
</g>
<g transform="scale(1, -1) translate(0, -900)">
<style>
.stroke1 {fill: #BF0909;}
.stroke2 {fill: #BFBF09;}
.stroke3 {fill: #09BF09;}
.stroke4 {fill: #09BFBF;}
.stroke5 {fill: #0909BF;}
.stroke6 {fill: #BF09BF;}
.stroke7 {fill: #BFBFBF;}
.stroke8 {fill: #090909;}
text {
font-family: Helvetica;
font-size: 80px;
fill: #FFFFFF;
paint-order: stroke;
stroke: #000000;
stroke-width: 4px;
stroke-linecap: butt;
stroke-linejoin: miter;
font-weight: 800;
}
</style>
<path class="stroke1" d="M 272 567 Q 306 613 342 669 Q 370 718 395 743 Q 405 753 400 769 Q 396 782 365 808 Q 337 827 316 828 Q 297 827 305 802 Q 318 769 306 741 Q 267 647 207 560 Q 150 476 72 385 Q 60 375 58 367 Q 54 355 70 358 Q 82 359 109 384 Q 155 421 213 493 Q 226 509 241 527 L 272 567 Z" fill="#BF0909"></path>
<path class="stroke2" d="M 241 527 Q 262 506 258 375 Q 258 374 258 370 Q 254 253 221 135 Q 215 114 224 80 Q 236 44 248 32 Q 267 16 279 44 Q 294 86 294 134 Q 303 420 314 485 Q 321 515 295 543 Q 289 549 272 567 C 251 589 227 553 241 527 Z" fill="lightgray"></path>
<path class="stroke3" d="M 521 560 Q 561 621 602 708 Q 620 751 638 773 Q 645 786 639 799 Q 633 811 602 830 Q 572 846 554 843 Q 535 839 546 817 Q 561 795 552 757 Q 513 619 407 448 Q 398 436 397 430 Q 394 418 409 423 Q 439 432 503 532 L 521 560 Z" fill="lightgray"></path>
<path class="stroke4" d="M 503 532 Q 527 510 555 520 Q 795 608 782 549 Q 783 543 743 468 Q 736 458 741 453 Q 745 447 756 459 Q 852 532 894 549 Q 904 552 905 561 Q 906 574 876 592 Q 852 605 828 621 Q 800 637 783 630 Q 686 590 521 560 C 492 555 479 550 503 532 Z" fill="lightgray"></path>
<path class="stroke5" d="M 568 72 Q 531 81 494 91 Q 482 94 483 86 Q 484 79 494 71 Q 569 7 596 -33 Q 611 -49 626 -36 Q 659 -3 661 82 Q 655 149 655 345 Q 656 382 667 407 Q 676 426 659 439 Q 634 461 604 470 Q 585 477 577 469 Q 571 462 582 447 Q 619 384 603 127 Q 597 82 589 74 Q 582 67 568 72 Z" fill="lightgray"></path>
<path class="stroke6" d="M 444 320 Q 419 262 385 208 Q 364 180 381 144 Q 388 128 409 139 Q 460 181 468 264 Q 472 295 467 319 Q 463 328 456 328 Q 449 327 444 320 Z" fill="lightgray"></path>
<path class="stroke7" d="M 738 307 Q 789 249 847 168 Q 860 146 876 139 Q 885 138 893 146 Q 908 159 900 204 Q 891 264 743 338 Q 734 345 731 332 Q 728 319 738 307 Z" fill="lightgray"></path>
<text x="317" y="812">1</text>
<text x="273" y="558">2</text>
<text x="556" y="828">3</text>
<text x="513" y="532">4</text>
<text x="586" y="463">5</text>
<text x="455" y="316">6</text>
<text x="742" y="326">7</text>
</g>
</svg>
如果不水平和垂直翻转文本,我就是想不出一种方法来让文本显示在正确的位置。我已经尝试将文本包装在另一个 g-tag 中并再次进行转换并还原它,但随后文本会消失。我还尝试将文本从原始 g-tag 中移出,但是我的坐标不再有效...
编辑:我正在寻找一种与 Safari(在 Windows 上)、Chrome 和 Firefox 兼容的方式来生成 svg。
Edit2:很遗憾,我不能使用 transform-box
,因为我需要支持不支持它的基于 Safari 的浏览器。
最佳答案
操作 SVG,你需要做的就是
<text>
transform
组外的元素属性重新计算 y
属性与
y -> 940 - y
假设变换属性总是transform="scale(1, -1) translate(0, -900)"
和字体大小80px
.一般公式是
y -> (negative y translation + font size / 2) - y
这是一个利用cheerio更改现有文件的 Node 脚本:
const cheerio = require('cheerio');
const $ = cheerio.load(xmlText, { xmlMode: true });
function flipTextInPlace ($) {
$('text').each(() => {
const y = $(this).attr('y');
$(this).attr('y', 940 - y);
}).appendTo('svg');
}
关于javascript - 翻转大部分 svg 图像,但不翻转其中的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52062424/
我有一个数据集,我试图在其中探索将变量限制在给定值并将超出的部分滚动到后续间隔的影响。我可以从概念上看到一些方法可以使用 cumsum() 来做到这一点。或类似的,但正在努力了解如何以合乎逻辑的方式实
我正在开发一个使用 iPhone 前置摄像头的应用程序。当使用该相机拍摄图像时,iPhone 会水平扭曲图像。我想将其镜像回来,以便能够保存它并按照在 iPhone 屏幕上看到的方式显示它。 我读了很
这是 HTML // stuff here Order /
我正在使用 Jquery - 是否有一种简单的方法可以在用户滑过 div 时更改它的背景颜色? 最佳答案 你可以用 CSS 做到这一点: #myDiv:hover { background-color
有谁知道是否可以翻转图像并在其背面显示内容。这就是我的意思:想象一下你手里拿着一张肖像。然后你翻转并查看肖像的背面,背面有文字。我正在寻找类似的东西,单击图像将镜像/翻转到另一侧,上面有文字。不可90
我在翻车方面遇到了一些麻烦..希望你能帮助我! 我正在使用 li 导航,我希望有单独的框链接到不同的页面。这部分很好,可以正常工作。我希望能够将鼠标悬停在框上并让框和链接改变颜色。我可以毫无问题地改变
所以我目前在 Vuejs 中有一个组件,用户可以在其中从他们的本地文件系统中选择一个文件。用户选择图片后,图片会在 div 中预览 codesandbox .出于某种原因,某些图像会自动“翻转”到侧面
我有一个滚动顶部菜单。我正在尝试获取它,以便我的背景图像 (17px x 13px) 悬停在中央。我已经尝试了所有背景 css 属性,但似乎没有任何效果。我是不是用错了方法? 这是我的 CSS: #n
我以前用过这个效果,一切正常(据我所知),但就是不行。我错过了什么? Fiddle here Sprite here 谢谢。 最佳答案 由于您的 Sprite 是水平排列的,因此您需要像这样偏移悬停状
代码后面的代码不起作用,因为重新查找接受字符串作为第一个参数,正则表达式作为第二个参数。 (-> "hello" .toUpperCase (re-find #".$")) 如果我像这
我想使用 CABasicAnimation 翻转 UILabel。动画将永远重复,并将在两个不同值之间更改 UILabel 的文本。 - (void)animateLabel { [self
旋转 WPF 图像非常简单 imgCurrent.LayoutTransform = new RotateTransform(_rotationAngle); 水平和垂直镜像呢? 机外: In GDI
我需要创建一个动画 - 翻转一个 View 并显示另一个。 当前显示的 View 的宽度慢慢减小到零,之后要显示的 View 的宽度必须从零开始增加。 在此期间,高度从当前显示的高度变为略微降低的高度
我正在尝试找到翻转 Rust 中 boolean 值的最快方法?即 false => true true => false 对于我的应用程序,我不关心 boolean 值的当前值,只关心它被翻转了。对
是否可以翻转 primefaces 中的数据表,以使标题位于左侧而不是顶部?我有下表: 如您所见
我在翻转 View 时遇到了一些问题。我的 View Controller 中有以下代码: - (void)loadFlipsideViewController { ProblemViewFl
我正在使用翻转动画在 View Controller 中的两个 View 之间制作动画。问题是动画发生时背景显示白色空白背景。我想显示黑色背景。 我尝试在 IB 和代码中将主视图的背景颜色设置为黑色。
请考虑下面的代码,并告诉我我做错了什么。 我想在两个 UIView 之间切换。 不知何故,当我从初始 View 翻转时,我只是得到翻转的 View ,没有动画。当我向后翻转时,动画显示得很好。 翻转是
我有一个 NSScrollView,需要在其中显示可变数量的 NSView。我制作了一个自定义 NSView,它的 isFlipped 返回 YES 并将我的 NSView 放入其中,然后将其设置为
我有一个 NSView 的子类,它重新实现了许多鼠标事件函数。例如,在 mouseDown 中从我使用的 NSEvent 获取点: NSEvent *theEvent; // <- argument
我是一名优秀的程序员,十分优秀!