我有一个svg rectange仅用边框转换90°并填充：无。 我还有一条填充上面矩形的路径。请注意，我不想使用fill属性，以使矩形变为绿色。我希望另一条路径填充它就像它有背景。
<svg height="100%" width="100%" id="svg-rect-rotated" x="-166px" y="-190px">
<rect id="rect" x="463.923" y="258.923" transform="matrix(0.7071 0.7071 -0.7071 0.7071 346.2503 -262.9221)" fill="#00ff87" stroke="none" stroke-width="6.522" width="55.154" height="55.154"/>
<path id="path" style="fill:none;stroke:#00ff87;stroke-width:4.4164;stroke-miterlimit:10;" d="M490.156,251.632L492.702 251.632 489.39 252.51 493.805 252.818 488.627 253.301 494.823 254.004 487.608 254.355 496.182 255.234 486.76 255.058 497.2 256.376 485.911 255.937 498.176 257.387 485.062 257.036 499.173 258.54 484.118 257.948 500.054 259.573 482.961 258.948 501.169 260.43 482.134 259.902 502.059 261.384 481.497 260.627 502.823 262.208 480.829 261.353 503.651 263.033 479.779 262.439 504.67 264.12 478.823 263.396 505.751 265.24 477.805 264.449 506.802 266.262 476.882 265.438 507.82 267.383 476.054 266.262 508.584 268.239 475.354 267.086 509.476 269.063 474.399 268.008 510.302 269.953 473.699 268.7 511.13 270.776 473.031 269.393 511.884 271.534 472.331 270.084 512.564 272.326 471.695 270.788 513.199 272.896 471.057 271.446 513.878 273.643 470.507 272.062 514.474 274.258 469.869 272.677 515.025 274.786 469.276 273.379 515.746 275.533 468.638 273.95 516.34 276.191 468.044 274.565 516.977 276.807 467.578 275.093 517.614 277.509 466.983 275.708 518.377 278.257 466.263 276.411 519.099 279.047 465.668 277.026 519.651 279.619 465.159 277.553 520.16 280.102 464.606 278.125 520.797 280.717 463.971 278.784 521.391 281.376 463.292 279.531 522.028 282.035 462.613 280.102 522.663 282.65 461.89 280.893 523.299 283.397 461.254 281.595 523.936 283.968 460.615 282.21 524.531 284.649 459.981 282.936 525.422 285.637 458.962 283.857 525.989 286.164 457.881 284.781 524.977 287.22 456.989 285.836 523.958 288.274 457.434 286.626 523.003 289.196 458.325 287.615 522.24 290.053 458.922 288.295 521.604 290.668 459.557 288.867 520.966 291.371 460.194 289.613 520.244 292.161 460.83 290.229 519.566 292.733 461.465 290.888 518.886 293.479 462.06 291.546 518.25 294.139 462.696 292.161 517.699 294.71 463.206 292.645 517.19 295.238 463.757 293.216 516.594 295.852 464.479 294.006 515.873 296.555 465.242 294.754 515.28 297.17 465.879 295.456 514.812 297.698 466.515 296.072 514.218 298.313 467.11 296.73 513.581 298.884 467.832 297.478 512.989 299.587 468.384 298.005 512.35 300.201 468.976 298.62 511.798 300.817 469.656 299.367 511.162 301.477 470.293 299.938 510.527 302.179 470.973 300.729 509.825 302.871 471.726 301.487 509.157 303.563 472.552 302.311 508.457 304.254 473.381 303.2 507.502 305.178 474.272 304.024 506.802 306.001 475.036 304.881 505.974 306.826 476.054 306.001 505.051 307.814 477.105 307.023 504.032 308.868 478.187 308.143 503.077 309.824 479.206 309.23 502.027 310.911 480.033 310.055 501.359 311.636 480.797 310.878 500.722 312.361 481.688 311.834 499.926 313.218 482.802 312.69 498.739 314.316 483.683 313.724 497.795 315.228 484.68 314.877 496.945 316.326 485.656 315.887 496.096 317.206 486.675 317.029 495.247 317.908 488.033 318.259 494.229 318.962 489.052 319.445 493.466 319.752 490.155 320.632 492.701 320.632 " />
</svg>
如果您看到jsfiddle我的路径溢出矩形。有没有办法防止这种情况发生使用CSS？或者我必须再次创建tha路径？
答案 0 :(得分：1)
使用CSS转换或SVG表示属性来缩放/旋转/平移以调整元素。
我从矩形中移除了矩阵变换，而是将rect和path放在一个获得旋转变换的g元素中。然后路径本身缩小并在rect内翻译。我认为这涵盖了你的目标。使用代码更多地使用它来获取它想要的地方......
<svg viewBox="0 0 650 650">
<g id="g" transform="rotate(30)">
<rect id="rect" x="463.923" y="258.923" fill="none" stroke="#00ff87" stroke-width="6.522" width="55.154" height="55.154"></rect>
<path transform="scale(.8) translate(125,70)" id="path" style="fill:none;stroke:#00ff87;stroke-width:4.4164;stroke-miterlimit:10;" d="M490.156,251.632L492.702 251.632 489.39 252.51 493.805 252.818 488.627 253.301 494.823 254.004 487.608 254.355 496.182 255.234 486.76 255.058 497.2 256.376 485.911 255.937 498.176 257.387 485.062 257.036 499.173 258.54 484.118 257.948 500.054 259.573 482.961 258.948 501.169 260.43 482.134 259.902 502.059 261.384 481.497 260.627 502.823 262.208 480.829 261.353 503.651 263.033 479.779 262.439 504.67 264.12 478.823 263.396 505.751 265.24 477.805 264.449 506.802 266.262 476.882 265.438 507.82 267.383 476.054 266.262 508.584 268.239 475.354 267.086 509.476 269.063 474.399 268.008 510.302 269.953 473.699 268.7 511.13 270.776 473.031 269.393 511.884 271.534 472.331 270.084 512.564 272.326 471.695 270.788 513.199 272.896 471.057 271.446 513.878 273.643 470.507 272.062 514.474 274.258 469.869 272.677 515.025 274.786 469.276 273.379 515.746 275.533 468.638 273.95 516.34 276.191 468.044 274.565 516.977 276.807 467.578 275.093 517.614 277.509 466.983 275.708 518.377 278.257 466.263 276.411 519.099 279.047 465.668 277.026 519.651 279.619 465.159 277.553 520.16 280.102 464.606 278.125 520.797 280.717 463.971 278.784 521.391 281.376 463.292 279.531 522.028 282.035 462.613 280.102 522.663 282.65 461.89 280.893 523.299 283.397 461.254 281.595 523.936 283.968 460.615 282.21 524.531 284.649 459.981 282.936 525.422 285.637 458.962 283.857 525.989 286.164 457.881 284.781 524.977 287.22 456.989 285.836 523.958 288.274 457.434 286.626 523.003 289.196 458.325 287.615 522.24 290.053 458.922 288.295 521.604 290.668 459.557 288.867 520.966 291.371 460.194 289.613 520.244 292.161 460.83 290.229 519.566 292.733 461.465 290.888 518.886 293.479 462.06 291.546 518.25 294.139 462.696 292.161 517.699 294.71 463.206 292.645 517.19 295.238 463.757 293.216 516.594 295.852 464.479 294.006 515.873 296.555 465.242 294.754 515.28 297.17 465.879 295.456 514.812 297.698 466.515 296.072 514.218 298.313 467.11 296.73 513.581 298.884 467.832 297.478 512.989 299.587 468.384 298.005 512.35 300.201 468.976 298.62 511.798 300.817 469.656 299.367 511.162 301.477 470.293 299.938 510.527 302.179 470.973 300.729 509.825 302.871 471.726 301.487 509.157 303.563 472.552 302.311 508.457 304.254 473.381 303.2 507.502 305.178 474.272 304.024 506.802 306.001 475.036 304.881 505.974 306.826 476.054 306.001 505.051 307.814 477.105 307.023 504.032 308.868 478.187 308.143 503.077 309.824 479.206 309.23 502.027 310.911 480.033 310.055 501.359 311.636 480.797 310.878 500.722 312.361 481.688 311.834 499.926 313.218 482.802 312.69 498.739 314.316 483.683 313.724 497.795 315.228 484.68 314.877 496.945 316.326 485.656 315.887 496.096 317.206 486.675 317.029 495.247 317.908 488.033 318.259 494.229 318.962 489.052 319.445 493.466 319.752 490.155 320.632 492.701 320.632 " style="-webkit-transition: stroke-dashoffset 1s ease-in-out; transition: stroke-dashoffset 1s ease-in-out; stroke-dasharray: 988.003967285156px, 988.003967285156px; stroke-dashoffset: 0px;" />
</g>
</svg>
希望这有帮助！