- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont?
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
我有两个具有不同视口(viewport)的 svg
。我使用 vector-effect: non-scaling-stroke
使两个 svg
的 stroke-width
相同。
问题是,当我使用 vector-effect: non-scaling-stroke
时,css 过渡的持续时间不起作用。
#circleStroke {
transition: stroke-dashoffset 800ms cubic-bezier(0, 0.25, 0.01, 0.99),
stroke 800ms;
stroke-dashoffset: 337.6;
stroke-dasharray: 337.6 339.6;
}
没有 vector-effect: non-scaling-stroke
规则的工作动画示例。
document.getElementById("pause").addEventListener("click", function( event ) {
var element = document.getElementById("circleStroke");
if (element.classList.contains("play")) {
element.classList.remove("play");
} else {
element.classList.add("play");
}
}, false);
.fst-wrapper, .snd-wrapper{
width: 90px;
height: 90px;
}
#circleStroke {
fill: none;
paint-order: 'markers fill stroke';
stroke-linecap: 'square';
stroke-linejoin: 'round';
stroke: black;
stroke-width: 2;
}
#circleStroke {
transition: stroke-dashoffset 800ms cubic-bezier(0, 0.25, 0.01, 0.99),
stroke 800ms;
stroke-dashoffset: 337.6;
stroke-dasharray: 337.6 339.6;
}
#circleStroke.play {
stroke-dashoffset: 0;
}
.vert-line{
fill: none;
stroke-width: 2;
}
#line2{
stroke-width: 2;
}
.vert-line, #circleStroke, #line2 {
/* vector-effect: non-scaling-stroke; */
}
<div class="fst-wrapper">
<svg
id="pause"
viewBox="-20 -20 140 140"
>
<g id="svgG">
<path
id="circleStroke"
strokeDasharray="337"
strokeDashoffset="5"
d="m50.43 99.993c0.99612-0.0138 1.9932-0.0275 3.0399-0.0826 1.0466-0.0551 2.1437-0.15152 2.9586-0.23417 0.81481-0.0827 1.3473-0.15151 2.1502-0.28228 0.80289-0.13078 1.8779-0.32373 2.9836-0.56921s2.2453-0.54417 3.1424-0.79657 1.5542-0.45918 2.1703-0.6699 1.1971-0.42742 1.7772-0.65442 1.1643-0.4662 1.8177-0.75048c0.65338-0.28429 1.3802-0.61548 2.1699-1.0081 0.78978-0.39265 1.6431-0.84684 2.3336-1.2277s1.2191-0.6888 1.7383-1.0059c0.51918-0.31707 1.0278-0.64239 1.6398-1.0596 0.61199-0.41718 1.3297-0.92787 2.0269-1.4531 0.69718-0.5252 1.3776-1.0677 1.9635-1.5506s1.085-0.91269 1.6077-1.3918 1.0747-1.0128 1.5586-1.4944c0.48388-0.48161 0.90238-0.9139 1.3952-1.4457 0.49278-0.53176 1.0633-1.1667 1.514-1.6909 0.4507-0.52413 0.78405-0.94025 1.1313-1.3883 0.34723-0.44809 0.71082-0.93135 1.0513-1.3968s0.66022-0.91632 1.0006-1.4206c0.34035-0.50425 0.70391-1.0657 1.0616-1.6446 0.35766-0.57893 0.71185-1.1792 0.95067-1.5926s0.36248-0.64011 0.56142-1.0186c0.19894-0.37846 0.47581-0.91374 0.71197-1.3872 0.23616-0.4735 0.43399-0.88986 0.68371-1.442s0.55356-1.245 0.83446-1.9341 0.54071-1.3789 0.80668-2.1424c0.26597-0.76356 0.53958-1.6051 0.74142-2.2715 0.20185-0.6664 0.33286-1.1606 0.45322-1.6237 0.12036-0.46311 0.23079-0.89794 0.33049-1.3151 0.0997-0.41717 0.18946-0.81992 0.29026-1.3263s0.21359-1.1209 0.30414-1.6574 0.15958-0.999 0.21244-1.376c0.05285-0.37703 0.08942-0.66726 0.1352-1.0862 0.04578-0.41897 0.10108-0.96961 0.14235-1.4386 0.04127-0.46897 0.06887-0.85993 0.0975-1.4006 0.02863-0.54071 0.05856-1.2358 0.07117-1.9536 0.01261-0.71783 8e-3 -1.4717-0.01037-2.1484-0.01836-0.67666-0.05054-1.2834-0.08725-1.804-0.03671-0.52065-0.07809-0.95741-0.13769-1.5236s-0.1378-1.2654-0.23185-1.9489c-0.09405-0.68352-0.20436-1.3546-0.32364-2.045-0.11928-0.69041-0.24796-1.4028-0.3581-1.9304-0.11014-0.52765-0.20205-0.87231-0.33958-1.3903-0.13753-0.51803-0.32151-1.2126-0.47524-1.7471-0.15372-0.53455-0.27779-0.91134-0.45892-1.4547-0.18113-0.54338-0.42021-1.256-0.65423-1.8961s-0.46373-1.2098-0.67939-1.7305c-0.21566-0.52078-0.41782-0.99402-0.6151-1.4345-0.19729-0.44044-0.39028-0.84941-0.61966-1.3081-0.22938-0.45874-0.4959-0.96881-0.74315-1.429s-0.47802-0.87558-0.73267-1.3298c-0.25465-0.45424-0.5349-0.95041-0.83774-1.4506-0.30284-0.50014-0.62898-1.0054-0.93416-1.4666-0.30518-0.46122-0.58993-0.87915-1.0204-1.4608-0.43047-0.58164-1.0109-1.3325-1.4813-1.92-0.47046-0.5875-0.83317-1.0145-1.1981-1.4391s-0.7322-0.84696-1.1648-1.3117c-0.43255-0.4647-0.92615-0.96744-1.4862-1.5183-0.56001-0.55083-1.1843-1.1476-1.8476-1.7374-0.66329-0.58985-1.3656-1.1728-2.0197-1.6938-0.65415-0.52103-1.26-0.98-1.8797-1.4276-0.61974-0.4476-1.2531-0.88358-1.9899-1.3565-0.73686-0.47288-1.5766-0.98224-2.2974-1.4s-1.3219-0.74358-1.9785-1.0788c-0.6566-0.3352-1.3677-0.67927-1.9049-0.93409-0.53717-0.25481-0.8996-0.41997-1.444-0.64508-0.54438-0.22511-1.2688-0.50936-1.8863-0.74124s-1.1267-0.41078-1.7222-0.60389c-0.59545-0.19311-1.2728-0.39906-2.0329-0.61492-0.76008-0.21586-1.5993-0.44058-2.3088-0.61233s-1.2964-0.29191-1.8522-0.39717c-0.55583-0.10526-1.0921-0.19772-1.841-0.30341-0.74893-0.10568-1.7115-0.22486-2.7126-0.31901-1.0011-0.09416-2.0376-0.16295-3.0594-0.202s-2.0262-0.04822-2.9745-0.02298c-0.94832 0.02524-1.838 0.08485-2.7175 0.15833-0.87956 0.07348-1.7461 0.16059-2.6257 0.28229s-1.769 0.27758-2.6923 0.4613c-0.92327 0.18372-1.8768 0.39461-2.7748 0.61965-0.89792 0.22504-1.7369 0.46344-2.6787 0.76663-0.94176 0.30318-1.9823 0.6699-3.0893 1.1108-1.107 0.44092-2.2762 0.95445-3.0889 1.3286-0.81274 0.37419-1.2667 0.60806-1.8046 0.89539s-1.156 0.62612-1.7395 0.96381c-0.58352 0.33768-1.1287 0.67214-1.7262 1.0559-0.59746 0.38374-1.2433 0.81431-1.9287 1.2956-0.68543 0.48134-1.4124 1.0151-2.1498 1.5962-0.73736 0.58113-1.4844 1.209-2.2907 1.9372-0.80626 0.72814-1.668 1.5532-2.2374 2.1203-0.56941 0.56706-0.84451 0.87425-1.2102 1.2837s-0.81861 0.91721-1.3998 1.6138c-0.58117 0.69656-1.278 1.5665-1.7747 2.2196-0.49672 0.65314-0.7841 1.0774-1.0034 1.389-0.21932 0.31158-0.36359 0.50095-0.53406 0.75199-0.17046 0.25104-0.36214 0.55682-0.55798 0.87236-0.19584 0.31555-0.3932 0.63664-0.56231 0.9167s-0.30818 0.51615-0.46066 0.78134-0.3182 0.55926-0.4906 0.87072-0.35021 0.63797-0.48981 0.9001-0.2402 0.45845-0.33298 0.644-0.17666 0.35814-0.28339 0.57162-0.23406 0.4633-0.35447 0.71871-0.23186 0.51223-0.33432 0.74724-0.19453 0.44501-0.26934 0.61334c-0.074809 0.16833-0.13129 0.29259-0.20642 0.46977s-0.16675 0.40221-0.26114 0.639c-0.094396 0.23679-0.18964 0.48055-0.29053 0.74253s-0.20586 0.53814-0.30426 0.80486-0.18889 0.52041-0.26777 0.74565-0.14511 0.41907-0.22983 0.67485c-0.084719 0.25578-0.18633 0.56869-0.27977 0.86926-0.093433 0.30057-0.17764 0.58557-0.25238 0.84388-0.07474 0.25832-0.13951 0.48824-0.23723 0.85551-0.097726 0.36727-0.22689 0.86618-0.32111 1.2471-0.094221 0.38089-0.15251 0.63996-0.23716 1.0314-0.08465 0.39149-0.19451 0.91012-0.28062 1.3512-0.08611 0.44104-0.14765 0.80054-0.2078 1.1671-0.06015 0.36657-0.11839 0.73705-0.16227 1.0385-0.043883 0.30142-0.073007 0.53118-0.10637 0.79807-0.033362 0.26689-0.07051 0.56731-0.10384 0.85019-0.033332 0.28288-0.062437 0.54483-0.086844 0.80832-0.024406 0.26348-0.0438 0.5253-0.063321 0.7937s-0.038908 0.53983-0.055987 0.80895-0.031628 0.53263-0.042202 0.76349-0.01704 0.42646-0.024365 0.65595c-0.00732 0.2295-0.015398 0.48947-0.020283 0.75129-0.00489 0.26182-0.0065 0.52209 8.184e-4 1.0185 0.00732 0.49642 0.023488 1.2223 0.041337 1.7549s0.037299 0.86807 0.062489 1.2354 0.05594 0.76386 0.084363 1.0953c0.028423 0.3314 0.054331 0.59533 0.077896 0.82694s0.044592 0.42894 0.068986 0.62577c0.024393 0.19683 0.051861 0.39072 0.079529 0.59821s0.055113 0.42544 0.08845 0.66128 0.072135 0.48641 0.11278 0.74083c0.04064 0.25442 0.082698 0.51 0.12902 0.7693s0.096478 0.51976 0.14768 0.78063c0.051198 0.26088 0.10298 0.51977 0.15173 0.7473 0.048748 0.22752 0.094056 0.4217 0.15828 0.69972 0.064221 0.27802 0.14676 0.63732 0.23287 0.99312s0.17518 0.70564 0.25802 1.011c0.08284 0.3054 0.15897 0.56455 0.2451 0.85872 0.086137 0.29416 0.18165 0.62118 0.26611 0.89651 0.084462 0.27533 0.15735 0.49724 0.25253 0.78604 0.095182 0.2888 0.21156 0.64115 0.30249 0.90587 0.090938 0.26472 0.15575 0.4397 0.281 0.76749 0.12526 0.32779 0.30969 0.80505 0.49431 1.2594 0.18461 0.45433 0.37043 0.8879 0.62542 1.4612 0.25499 0.57332 0.57921 1.2866 1.0103 2.136s0.97111 1.8383 1.4289 2.6434c0.45775 0.80512 0.83414 1.4281 1.3082 2.1587 0.47405 0.73056 1.0451 1.5676 1.7061 2.4523 0.66101 0.88472 1.4164 1.8225 2.0186 2.5417 0.60216 0.71921 1.0468 1.2154 1.5727 1.777 0.52589 0.5616 1.1296 1.1847 1.7463 1.7853 0.61676 0.60053 1.2464 1.1783 1.9541 1.7885s1.4932 1.253 2.4052 1.9443c0.912 0.6913 1.9509 1.4315 2.9766 2.1001 1.0257 0.6686 2.0386 1.266 2.9214 1.7593 0.88281 0.49333 1.6361 0.88295 2.4376 1.2724s1.6524 0.77912 2.5455 1.1473c0.8931 0.36814 1.8141 0.7095 2.5378 0.96911 0.7237 0.25962 1.2434 0.435 2.0415 0.66771s1.8896 0.52681 2.8436 0.76045c0.95407 0.23364 1.779 0.40902 2.5416 0.5545 0.76258 0.14548 1.4771 0.26348 2.1811 0.36079 0.70399 0.0973 1.4059 0.1753 2.1488 0.23692 0.74285 0.0616 1.5293 0.10712 2.4172 0.14718 0.88789 0.0401 1.8805 0.0748 2.2983 0.68533 0.41776 0.61051 0.26265 1.7979 0.19575 5.049-0.06689 3.251-0.04542 18.453-0.02395 23.769"
/>
<path
id="line2"
d="M 38 30 L 70 50 L 38 70"
rx="10"
ry="10"
/>
</g>
</svg>
</div>
<div class="snd-wrapper">
<svg class="vert-line" width="100%" height="100%" viewBox="0 0 100 100">
<path
d="M 51 0 51 19 L 51, 19 C 51, 26, 54.5, 30, 60, 30"
stroke='black'
/>
</svg>
</div>
动画不适用于 vector-effect: non-scaling-stroke
规则。
document.getElementById("pause").addEventListener("click", function( event ) {
var element = document.getElementById("circleStroke");
if (element.classList.contains("play")) {
element.classList.remove("play");
} else {
element.classList.add("play");
}
}, false);
.fst-wrapper, .snd-wrapper{
width: 90px;
height: 90px;
}
#circleStroke {
fill: none;
paint-order: 'markers fill stroke';
stroke-linecap: 'square';
stroke-linejoin: 'round';
stroke: black;
stroke-width: 2;
}
#circleStroke {
transition: stroke-dashoffset 800ms cubic-bezier(0, 0.25, 0.01, 0.99),
stroke 800ms;
stroke-dashoffset: 337.6;
stroke-dasharray: 337.6 339.6;
}
#circleStroke.play {
stroke-dashoffset: 0;
}
.vert-line{
fill: none;
stroke-width: 2;
}
#line2{
stroke-width: 2;
}
.vert-line, #circleStroke, #line2 {
vector-effect: non-scaling-stroke;
}
<div class="fst-wrapper">
<svg
id="pause"
viewBox="-20 -20 140 140"
>
<g id="svgG">
<path
id="circleStroke"
strokeDasharray="337"
strokeDashoffset="5"
d="m50.43 99.993c0.99612-0.0138 1.9932-0.0275 3.0399-0.0826 1.0466-0.0551 2.1437-0.15152 2.9586-0.23417 0.81481-0.0827 1.3473-0.15151 2.1502-0.28228 0.80289-0.13078 1.8779-0.32373 2.9836-0.56921s2.2453-0.54417 3.1424-0.79657 1.5542-0.45918 2.1703-0.6699 1.1971-0.42742 1.7772-0.65442 1.1643-0.4662 1.8177-0.75048c0.65338-0.28429 1.3802-0.61548 2.1699-1.0081 0.78978-0.39265 1.6431-0.84684 2.3336-1.2277s1.2191-0.6888 1.7383-1.0059c0.51918-0.31707 1.0278-0.64239 1.6398-1.0596 0.61199-0.41718 1.3297-0.92787 2.0269-1.4531 0.69718-0.5252 1.3776-1.0677 1.9635-1.5506s1.085-0.91269 1.6077-1.3918 1.0747-1.0128 1.5586-1.4944c0.48388-0.48161 0.90238-0.9139 1.3952-1.4457 0.49278-0.53176 1.0633-1.1667 1.514-1.6909 0.4507-0.52413 0.78405-0.94025 1.1313-1.3883 0.34723-0.44809 0.71082-0.93135 1.0513-1.3968s0.66022-0.91632 1.0006-1.4206c0.34035-0.50425 0.70391-1.0657 1.0616-1.6446 0.35766-0.57893 0.71185-1.1792 0.95067-1.5926s0.36248-0.64011 0.56142-1.0186c0.19894-0.37846 0.47581-0.91374 0.71197-1.3872 0.23616-0.4735 0.43399-0.88986 0.68371-1.442s0.55356-1.245 0.83446-1.9341 0.54071-1.3789 0.80668-2.1424c0.26597-0.76356 0.53958-1.6051 0.74142-2.2715 0.20185-0.6664 0.33286-1.1606 0.45322-1.6237 0.12036-0.46311 0.23079-0.89794 0.33049-1.3151 0.0997-0.41717 0.18946-0.81992 0.29026-1.3263s0.21359-1.1209 0.30414-1.6574 0.15958-0.999 0.21244-1.376c0.05285-0.37703 0.08942-0.66726 0.1352-1.0862 0.04578-0.41897 0.10108-0.96961 0.14235-1.4386 0.04127-0.46897 0.06887-0.85993 0.0975-1.4006 0.02863-0.54071 0.05856-1.2358 0.07117-1.9536 0.01261-0.71783 8e-3 -1.4717-0.01037-2.1484-0.01836-0.67666-0.05054-1.2834-0.08725-1.804-0.03671-0.52065-0.07809-0.95741-0.13769-1.5236s-0.1378-1.2654-0.23185-1.9489c-0.09405-0.68352-0.20436-1.3546-0.32364-2.045-0.11928-0.69041-0.24796-1.4028-0.3581-1.9304-0.11014-0.52765-0.20205-0.87231-0.33958-1.3903-0.13753-0.51803-0.32151-1.2126-0.47524-1.7471-0.15372-0.53455-0.27779-0.91134-0.45892-1.4547-0.18113-0.54338-0.42021-1.256-0.65423-1.8961s-0.46373-1.2098-0.67939-1.7305c-0.21566-0.52078-0.41782-0.99402-0.6151-1.4345-0.19729-0.44044-0.39028-0.84941-0.61966-1.3081-0.22938-0.45874-0.4959-0.96881-0.74315-1.429s-0.47802-0.87558-0.73267-1.3298c-0.25465-0.45424-0.5349-0.95041-0.83774-1.4506-0.30284-0.50014-0.62898-1.0054-0.93416-1.4666-0.30518-0.46122-0.58993-0.87915-1.0204-1.4608-0.43047-0.58164-1.0109-1.3325-1.4813-1.92-0.47046-0.5875-0.83317-1.0145-1.1981-1.4391s-0.7322-0.84696-1.1648-1.3117c-0.43255-0.4647-0.92615-0.96744-1.4862-1.5183-0.56001-0.55083-1.1843-1.1476-1.8476-1.7374-0.66329-0.58985-1.3656-1.1728-2.0197-1.6938-0.65415-0.52103-1.26-0.98-1.8797-1.4276-0.61974-0.4476-1.2531-0.88358-1.9899-1.3565-0.73686-0.47288-1.5766-0.98224-2.2974-1.4s-1.3219-0.74358-1.9785-1.0788c-0.6566-0.3352-1.3677-0.67927-1.9049-0.93409-0.53717-0.25481-0.8996-0.41997-1.444-0.64508-0.54438-0.22511-1.2688-0.50936-1.8863-0.74124s-1.1267-0.41078-1.7222-0.60389c-0.59545-0.19311-1.2728-0.39906-2.0329-0.61492-0.76008-0.21586-1.5993-0.44058-2.3088-0.61233s-1.2964-0.29191-1.8522-0.39717c-0.55583-0.10526-1.0921-0.19772-1.841-0.30341-0.74893-0.10568-1.7115-0.22486-2.7126-0.31901-1.0011-0.09416-2.0376-0.16295-3.0594-0.202s-2.0262-0.04822-2.9745-0.02298c-0.94832 0.02524-1.838 0.08485-2.7175 0.15833-0.87956 0.07348-1.7461 0.16059-2.6257 0.28229s-1.769 0.27758-2.6923 0.4613c-0.92327 0.18372-1.8768 0.39461-2.7748 0.61965-0.89792 0.22504-1.7369 0.46344-2.6787 0.76663-0.94176 0.30318-1.9823 0.6699-3.0893 1.1108-1.107 0.44092-2.2762 0.95445-3.0889 1.3286-0.81274 0.37419-1.2667 0.60806-1.8046 0.89539s-1.156 0.62612-1.7395 0.96381c-0.58352 0.33768-1.1287 0.67214-1.7262 1.0559-0.59746 0.38374-1.2433 0.81431-1.9287 1.2956-0.68543 0.48134-1.4124 1.0151-2.1498 1.5962-0.73736 0.58113-1.4844 1.209-2.2907 1.9372-0.80626 0.72814-1.668 1.5532-2.2374 2.1203-0.56941 0.56706-0.84451 0.87425-1.2102 1.2837s-0.81861 0.91721-1.3998 1.6138c-0.58117 0.69656-1.278 1.5665-1.7747 2.2196-0.49672 0.65314-0.7841 1.0774-1.0034 1.389-0.21932 0.31158-0.36359 0.50095-0.53406 0.75199-0.17046 0.25104-0.36214 0.55682-0.55798 0.87236-0.19584 0.31555-0.3932 0.63664-0.56231 0.9167s-0.30818 0.51615-0.46066 0.78134-0.3182 0.55926-0.4906 0.87072-0.35021 0.63797-0.48981 0.9001-0.2402 0.45845-0.33298 0.644-0.17666 0.35814-0.28339 0.57162-0.23406 0.4633-0.35447 0.71871-0.23186 0.51223-0.33432 0.74724-0.19453 0.44501-0.26934 0.61334c-0.074809 0.16833-0.13129 0.29259-0.20642 0.46977s-0.16675 0.40221-0.26114 0.639c-0.094396 0.23679-0.18964 0.48055-0.29053 0.74253s-0.20586 0.53814-0.30426 0.80486-0.18889 0.52041-0.26777 0.74565-0.14511 0.41907-0.22983 0.67485c-0.084719 0.25578-0.18633 0.56869-0.27977 0.86926-0.093433 0.30057-0.17764 0.58557-0.25238 0.84388-0.07474 0.25832-0.13951 0.48824-0.23723 0.85551-0.097726 0.36727-0.22689 0.86618-0.32111 1.2471-0.094221 0.38089-0.15251 0.63996-0.23716 1.0314-0.08465 0.39149-0.19451 0.91012-0.28062 1.3512-0.08611 0.44104-0.14765 0.80054-0.2078 1.1671-0.06015 0.36657-0.11839 0.73705-0.16227 1.0385-0.043883 0.30142-0.073007 0.53118-0.10637 0.79807-0.033362 0.26689-0.07051 0.56731-0.10384 0.85019-0.033332 0.28288-0.062437 0.54483-0.086844 0.80832-0.024406 0.26348-0.0438 0.5253-0.063321 0.7937s-0.038908 0.53983-0.055987 0.80895-0.031628 0.53263-0.042202 0.76349-0.01704 0.42646-0.024365 0.65595c-0.00732 0.2295-0.015398 0.48947-0.020283 0.75129-0.00489 0.26182-0.0065 0.52209 8.184e-4 1.0185 0.00732 0.49642 0.023488 1.2223 0.041337 1.7549s0.037299 0.86807 0.062489 1.2354 0.05594 0.76386 0.084363 1.0953c0.028423 0.3314 0.054331 0.59533 0.077896 0.82694s0.044592 0.42894 0.068986 0.62577c0.024393 0.19683 0.051861 0.39072 0.079529 0.59821s0.055113 0.42544 0.08845 0.66128 0.072135 0.48641 0.11278 0.74083c0.04064 0.25442 0.082698 0.51 0.12902 0.7693s0.096478 0.51976 0.14768 0.78063c0.051198 0.26088 0.10298 0.51977 0.15173 0.7473 0.048748 0.22752 0.094056 0.4217 0.15828 0.69972 0.064221 0.27802 0.14676 0.63732 0.23287 0.99312s0.17518 0.70564 0.25802 1.011c0.08284 0.3054 0.15897 0.56455 0.2451 0.85872 0.086137 0.29416 0.18165 0.62118 0.26611 0.89651 0.084462 0.27533 0.15735 0.49724 0.25253 0.78604 0.095182 0.2888 0.21156 0.64115 0.30249 0.90587 0.090938 0.26472 0.15575 0.4397 0.281 0.76749 0.12526 0.32779 0.30969 0.80505 0.49431 1.2594 0.18461 0.45433 0.37043 0.8879 0.62542 1.4612 0.25499 0.57332 0.57921 1.2866 1.0103 2.136s0.97111 1.8383 1.4289 2.6434c0.45775 0.80512 0.83414 1.4281 1.3082 2.1587 0.47405 0.73056 1.0451 1.5676 1.7061 2.4523 0.66101 0.88472 1.4164 1.8225 2.0186 2.5417 0.60216 0.71921 1.0468 1.2154 1.5727 1.777 0.52589 0.5616 1.1296 1.1847 1.7463 1.7853 0.61676 0.60053 1.2464 1.1783 1.9541 1.7885s1.4932 1.253 2.4052 1.9443c0.912 0.6913 1.9509 1.4315 2.9766 2.1001 1.0257 0.6686 2.0386 1.266 2.9214 1.7593 0.88281 0.49333 1.6361 0.88295 2.4376 1.2724s1.6524 0.77912 2.5455 1.1473c0.8931 0.36814 1.8141 0.7095 2.5378 0.96911 0.7237 0.25962 1.2434 0.435 2.0415 0.66771s1.8896 0.52681 2.8436 0.76045c0.95407 0.23364 1.779 0.40902 2.5416 0.5545 0.76258 0.14548 1.4771 0.26348 2.1811 0.36079 0.70399 0.0973 1.4059 0.1753 2.1488 0.23692 0.74285 0.0616 1.5293 0.10712 2.4172 0.14718 0.88789 0.0401 1.8805 0.0748 2.2983 0.68533 0.41776 0.61051 0.26265 1.7979 0.19575 5.049-0.06689 3.251-0.04542 18.453-0.02395 23.769"
/>
<path
id="line2"
d="M 38 30 L 70 50 L 38 70"
rx="10"
ry="10"
/>
</g>
</svg>
</div>
<div class="snd-wrapper">
<svg class="vert-line" width="100%" height="100%" viewBox="0 0 100 100">
<path
d="M 51 0 51 19 L 51, 19 C 51, 26, 54.5, 30, 60, 30"
stroke='black'
/>
</svg>
</div>
最佳答案
我认为这里的问题不在于transition duration
。例如,如果您将计时函数从 cubic-bezier()
更改为 linear
,您将看到持续时间值在两种状态下均有效。因此,问题可能在于 #pause > #circleStroke
的未/切换状态的贝塞尔曲线值。
将 CSS 过渡添加到 #circleStroke.play
可能是解决这个问题的一种方法,而像这样的东西......
...
#circleStroke {
transition: all 800ms cubic-bezier(0, 0.25, 0.01, 0.99);
stroke-dashoffset: 337.6;
stroke-dasharray: 337.6 339.6;
}
#circleStroke.play {
transition: all 800ms cubic-bezier(0.99, 0.01, 0.25, 0);
stroke-dashoffset: 0;
}
...
... 可能有点极端,它确实表明 #pause > #circleStroke
的每个状态都可以运行到它自己的转换计时函数。
我通常更喜欢用 CSS animate
来做这种事情,而不是转换——这是我前一段时间从 Jake Archbald's blog here 学到的东西。 .
此外,您还可以使用 Element.classList.toggle('class')
来实现状态更改功能...
document.getElementById("pause").addEventListener("click", function( event ) {
document.getElementById("circleStroke").classList.toggle('play');
}, false);
...不是我所知道的问题的一部分,但还是有点整洁。
希望对您有所帮助:)
关于css 过渡持续时间不适用于矢量效果 : non-scaling-stroke,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49098128/
我正在尝试将字符串列表转换为字符向量的向量: import collection.breakOut def stringsToCharVectors(xs: List[String]) = x
我正在尝试使用 Pytorch 通过 2D 向量(嘈杂语音帧序列)的回归来预测 1D 向量(干净语音数据帧) data) - 之前已经完成过。帧序列为帧提供时间上下文,以更准确地预测干净帧。这些向量可
在尝试构建时,我收到此错误: Operator '+=' is ambiguous on operands of type 'Vector3' and 'Vector2' 这是问题出处的脚本代码: u
是否存在实现 FIFO 意义上的循环数组或向量的 R 包? 假设我们有这个数组: 2 4 7 1 当在位置 1 插入一个新的观察值(比如 3)时,我希望第 n 个元素被第 n-1 个元素替换: 3 2
我在游戏中有两个对象,为此可以将其视为 2d 平面上的点,但我使用 Vector3s,因为游戏本身是 3d。 我有一个游戏相机,我想将其与两个物体垂直(也在平面上)对齐,以便它们都在相机的视野中。由于
我做了一个Telegram robot ,它的工作之一是从音频文件创建样本。现在对于发送给它的大多数音频,样本都非常好;像这样: 但是,对于一些音频,样本看起来有点奇怪: 如您所见,此文件中的波形未显
由于对 JavaScript 非常陌生,我在使用 JQuery VectorMaps 时遇到了以下问题: 当我用这种语法突出显示一个国家时,一切都很完美: jQuery('#vmap').vector
我正在使用 ChartJS 在我的网站中包含一些 map ,但 ChartJS 库没有我想要的 map 。 我想知道这种类型的矢量 map 是否很容易在网上免费找到,还是必须从头开始构建? Chart
我需要创建一个函数。在此范围内,我需要发生以下事情: List 1: '(a 5 6) List 2: '(c 8 10) List 3: '(d 4 9) 以上是列表。我需要忽略每个列表的第一列(这
我在地球表面有一个点,我正在将其从地球中心转换为向量。 我有一个以度数表示的真北航向,描述了该点将在地球表面行进的路径。 我需要计算一个向量,该向量垂直于该点沿地球表面的路径所创建的平面。 我尝试
大家好,这是我的 JavaScript 代码,用于为矢量 map 制作 ip 标记以显示在线 ip.. 所有 ips 都有 3 个不同的端口,例如:ip1:1020 或 ip2:5050 或 ip3:
我正在使用 Three.js 透视相机,我需要了解相机所注视的点。 如何使用相机的矩阵/旋转向量计算它? 最佳答案 相机向下看它的内部负 z 轴。所以选择相机负 z 轴上的任意点,如下所示: var
重要提示:请注意这个问题是关于 VECTOR map 的。不是高度图。 我正在尝试在 Scenekit 中实现 Vector 位移,如 apple 演示文稿中所述: https://www.youtu
我正在处理一个稳定增长的语料库。我使用用 Python 实现的 Doc2Vec 来训练我的文档向量。 是否可以更新文档向量? 我想使用文档向量进行文档推荐。 最佳答案 单个向量可以更新,但是 gens
我正在努力寻找一种比较(测量)两个不同信号之间相似性的好方法。我不想找出一个信号到另一个信号的时间延迟,但我想看看它们之间有何相似之处。例如,我有以下两个信号,比如说 s1 ans s2。这两个信号看
我想绘制 y 与 x 线,然后在它上面我想绘制向量。我可以使用 matplotlib 的 plot 和 quiver 函数来做到这一点。但是,矢量将始终绘制在线的后面,而不是在线的顶部。也就是说,线将
包含复数的向量 a 的大小为 N×1。任务是找到乘法a * a^HA (N-by-N) >,其中 H 是 Hermitian 算子(共轭转置),因此矩阵 A 是 Hermitian。 有没有比 O(N
三天来,我一直在努力从我的响应中获取复杂类型(列表),但总是收到 ClassCastException D/SOAPEnvelope(1552): Error: java.lang.ClassCast
在我的 android 项目中,我想要离线 map 。使用图 block ,我的 map 占用 500 MB 的空间,我还想在 map 上离线搜索地址。我认为减小尺寸并使搜索成为可能的唯一方法是矢量
什么是 Android Compose 方法来平铺图像以用小图案填充我的背景? 没有旋转的位图的天真方法可能是这样的: @Composable fun TileImage() { val pa
我是一名优秀的程序员,十分优秀!