是否有与矢量效果属性等效的属性可以应用于 SVG 本身而不是每个单独的路径?

问题描述 投票:0回答:2

我正在通过 SVG 显示美国各州县的地图。问题是,我希望每个状态以相对相同的大小显示,最终发生的情况是,一旦较小的状态被放大,

stroke-width
最终看起来会更大:

研究这个问题时,我遇到了

vector-effect
属性,并使用
vector-effect="non-scaling-stroke"
达到了预期的结果。问题是这个属性似乎是特定于路径的,这意味着我必须将此属性添加到构成页面上每个 SVG 的每个单独路径中,这并不理想。我尝试将属性添加到
<svg>
标签本身(右侧的示例),但它似乎只在
path
级别起作用。左边的就是想要的结果。是否有与此属性相同的属性,我可以直接应用于 SVG 标签?

.container {
  display:flex;
}

.svg-cont {
  flex:1;
}

.svg-cont path {
  fill:red;
  stroke:blue;
  stroke-width:0.05em;
}
<div class="container">
  <div class="svg-cont">
      <svg id="maryland" width="400" height="204" viewBox="0 0 82.99 41.41" preserveAspectRatio="none">
          <g><path vector-effect="non-scaling-stroke" id="24001" d="m19.04,9.09l.65-.12.54,1.95-1.84,3.15-3.35.18-2.12-.84-2.88,3.97-1.9-.43,1.39-6.11,2.12-.39,7.39-1.36"/>
              <path vector-effect="non-scaling-stroke" id="24023" d="m9.53,10.84l-1.39,6.11-3.27,3.95-.92,1.71-1.42,1.54-.54.2L.1,12.56l1.46-.26,7.97-1.45"/>
              <path vector-effect="non-scaling-stroke" id="24037" d="m59.72,34.2l.84,2.2,1.43,1.4-.16.5.65,1.71-.8-.26-.84-.8-1.23-.51-.14.66-1.23-.61-1.22-1.14-1.59-.35-1.33.28-.25.22-.85-.39-.7-.95-.92-1.6v-.43s.96-2.93.96-2.93l.16-.14.62-.09.33-.03.71.1,2.48,1.81,1.21.26.56,1.26,1.3-.18"/>
              <path vector-effect="non-scaling-stroke" id="24017" d="m46.03,27.83l1.06,1.91.28-.6.05-.18.08-.1.23-.16.57-.27,1.83-.32,2.18.51.07.13.44,1.22.89.27h.27l.19.82-.71-.1-.33.03-.62.09-.16.14-.96,2.93v.43s.91,1.6.91,1.6l.09.59v.3l-.04.18-1.75-.8-.19-.37-.91-.54-1.13-2.05-.76.52-.47.66-.49.09-.27.47-.94.91-.19-.04-.67-.33-.39-.67-.48-1.49.05-.73.27-.99.72-1.3.78-.96-.87-.81.58-.03.23-.63.52-.31"/>
              <path vector-effect="non-scaling-stroke" id="24047" d="m77.7,27.15l5.1-1.11.09.84v.6s0,.82,0,.82l-.07.75-.47,5.27-.05.32-.06.22-.1.37-.06.27-.33.84-.69.24.87-1.67.14-.57.09-1.09.32-2.79-.22.98-.56.44-.12-.74-.56.41-.5,2.29-.16,1.04-.48.14.03.67-.32-.1.02,1.47-4.57,1.56-1.08-1.45,2.07-1.03-.56-2.06-1.64-1.95,4.3-1.21.54-1.19.09-.54-.39-1.08-.65-.94"/>
              <path vector-effect="non-scaling-stroke" id="24045" d="m70.87,26.07l.24.87.19.66.21.73.54-.09,1.23-.21h.06l1.57-.3.37-.07.9-.17h.07s.24-.06.24-.06l.28-.05.68-.15.26-.06.65.94.39,1.08-.09.54-.54,1.19-4.3,1.21-1.07-.46-.49.93h-1.24s-1.41,1.39-1.41,1.39l-1.05-.36.03-1.73.55-3.57.11-.21.37-.21.42-.38.84-1.47"/>
              <path vector-effect="non-scaling-stroke" id="24043" d="m23.9,8.17l10.87-2.06-.26,1.26-.26.71-.14.24-.63.41-.04.25-.14,1.67-.04,2.15-.33,3.14-.69.08-.68-.36.07-1.78-1.15-.15-.22-1.25-.5-.02-.51-.28-.78-1.21.77-.32-.08-.61-.63.09-.86.31-.67.03-.84.31-.49-.54-.3-.33-.8-.58-.64-.24-.65-.07-.6-.02-.11.04-.12.14-.46.72-.62,1.14-.21.03-.93-.18-.54-1.95,4.21-.8"/>
              <path vector-effect="non-scaling-stroke" id="24009" d="m59.72,34.2l-1.3.18-.56-1.26-1.21-.26-2.48-1.81-.19-.82-1.18-4.78.09-.19.48-.42.44-.05.21.94,1.68-.03v.3s.11.48.11.48l.91,3.11.08.23.28.52.34.45.8.58,1.49,1.2.06.12.08.48-.13,1.05"/>
              <path vector-effect="non-scaling-stroke" id="24041" d="m64.82,18.9l.17.55,1.1,1.6-1.31,1.68-.18.72.06.08.94.79.48.11-.66,2.36-2.03-.17-.7-.5.06-.1-.25-.45-.89-.18-.93-1.27-.3.03-.29.57-.68-.23-.06.04-.18.42v.23l.28.27.03.23-.27.25-.2-.3-.2-1.52.02-.5.34-1.33.04-.06.47-.55.48.48h.8s-.13-.85-.13-.85l1.4-1.04-.09-1.41,2.72.04"/>
              <path vector-effect="non-scaling-stroke" id="24011" d="m64.82,18.9l.95-4.59,1.45-1.27,3.19,11.36-4.33.02-.48-.11-.94-.79-.06-.08.18-.72,1.31-1.68-1.1-1.6-.17-.55"/>
              <path vector-effect="non-scaling-stroke" id="24029" d="m61.69,8.8l4.05-.97.51,1.8.32,1.13-2.3.39-1.46.41-.59.26-.68.87.48,1.11-1.68,1.9-.75.35.33,1.61-.68-.06-.2-1.57-1.04-1.07-.03-.47.06-.37.74-3.44.2-.34.84-1.13,1.86-.41"/>
              <path vector-effect="non-scaling-stroke" id="24510" d="m53.31,14.22l-.31.59-1.31-.7-1.83-.53-.44-2.09,3.1-.65.79,3.39"/>
              <path vector-effect="non-scaling-stroke" id="24033" d="m47.51,17.47l.96.48,3.02,2.2.66,1.47.65,3.83,1.18,4.78h-.27l-.89-.27-.44-1.22-.07-.13-2.18-.51-1.83.32-.57.27-.23.16-.08.1-.05.18-.28.6-1.06-1.91.43-2v-.1s1.82-2.88,1.82-2.88l-2-1.2,1.23-4.18"/>
              <path vector-effect="non-scaling-stroke" id="24003" d="m55.48,16.26l.38.7-.17.66.83.56.12.25-1.21,1.1.57.69-.44,1.42-.19.87.45.18-.91,1.87.16.51.12.2.52.42-1.68.03-.21-.94-.44.05-.48.42-.09.19-.65-3.83-.66-1.47-3.02-2.2,1.95-3.02,1.27-.82,1.31.71,1.66.61.82.83Z"/>
              <path vector-effect="non-scaling-stroke" id="24027" d="m46.59,12.48l3.82,2.44-1.95,3.02-.96-.48-.29.22-.76.04-.2-.06-3.69-2.51-.85-.87-.35-.46-.02-.05.03-.12.22-.24v-.02s4.98-.91,4.98-.91"/>
              <path vector-effect="non-scaling-stroke" id="24031" d="m41.61,13.41l-.22.24-.03.12.02.05.35.46.85.87,3.69,2.51.2.06.76-.04.29-.22-1.23,4.18-.91-.47-.98,1.6-.64-.49-.85.08-.24-.06h-.38s-.4-.31-.4-.31l-.02-.69-.65-.2-1.01-.42-.84.09-.86.04-.63-.04h-.03s-1.14-.77-1.14-.77l-.11-.08h-.01l-.1-.14-.12-.39v-.02s.02-.21.02-.21l.04-.29v-.1s.08-.19.08-.19l.56-.24.15-.88,4.42-4.04"/>
              <path vector-effect="non-scaling-stroke" id="24035" d="m64.82,18.9l-2.72-.04.09,1.41-1.4,1.04-.3-1.24-.21-.4-.52-.33-.29.57-.35-.12-.38.25.12.45-.75.11.26.98-.58.78v-.83s-.43-1.54-.43-1.54l.7-2.46.61,1.12,1.42-.21.49-.94-.36-.7.17-.5-.06-.61,1.68-1.9-.48-1.11.68-.87.59-.26,1.46-.41,2.3-.39.64,2.29-1.45,1.27-.95,4.59"/>
              <path vector-effect="non-scaling-stroke" id="24015" d="m57.71,1.38L63.68.1l.19.7.02.12.02.12.03.11.03.11.03.11.03.11.04.11.04.11,1.64,6.14-4.05.97-.08-.27h-.55s.03-.41.03-.41l.65-.96-.56-.21.34-1.9-.25-.55-1.67.71-3.57-3.46,1.68-.36"/>
              <path vector-effect="non-scaling-stroke" id="24025" d="m55.92,1.76l.11-.02,3.57,3.46-.44,1.24.96.43.19.44-1.72,2.02-.68.8-.63.91.03.47-.32-.1-.28-.8-.42-.3-.09-.21-1.58-1.87-1.05-.79-1.04-.31-.36.07-.47-.37-.72-1.08-.17-.4-.58-2.4,5.67-1.19"/>
              <path vector-effect="non-scaling-stroke" id="24005" d="m46.51,3.73l3.74-.78.58,2.4.17.4.72,1.08.47.37.36-.07,1.04.31,1.05.79,1.58,1.87.09.21h-.09l-.3.14.41,1.1-.83.29-.17,1,.3.15.1-.03-.02.17-.06.19-.48.8-.25.3-1.08-.1-.51-.1h-.03l-.79-3.39-3.1.65.44,2.1,1.83.53-1.27.82-3.82-2.44-.68-2.39.28-1.82.32-4.54"/>
              <path vector-effect="non-scaling-stroke" id="24013" d="m46.51,3.73l-.32,4.54-.28,1.82.68,2.39-4.97.91.36-2.64.06-.71-.02-.05-2.15-1.57-1.98-.43.52-.89.69-1.86,3.74-.76,3.66-.76"/>
              <path vector-effect="non-scaling-stroke" id="24021" d="m34.94,6.08l4.18-.83-.69,1.86-.52.89,1.98.43,2.15,1.57.02.05-.06.71-.36,2.64v.02s-4.44,4.04-4.44,4.04l-1.58-.53-.66-.83-.96.24-1.07-.37.33-3.14.04-2.15.14-1.67.04-.25.63-.41.14-.24.26-.71.26-1.26.17-.03"/>
              <path vector-effect="non-scaling-stroke" id="24039" d="m67.73,40.98l-.14-.52-.14-.71v-.25s.04-.17.04-.17l.33-.23.14-.05.16.04.59.25.12.1.04.21-.23.11-.04.7.07.33-.93.2Zm-1.37-3.42l.59-.21.22-.47.1-.46.25.58.25.76.13.41-.08.13-.19.08-.26-.08-.49-.35-.52-.4m3.24-3.57l1.41-1.38h1.24s.49-.95.49-.95l1.07.46,1.64,1.95.56,2.06-2.07,1.03,1.08,1.45-.59,1.15-2.11-.06-1.08,1.36-.65.21v-.87s-.4-.49-.4-.49l.43-.95-.12-.35.56-.34.32-.67-.73-.13-.21.55-.37-.64.68-1.17-1.04-.09-.82.86-.43-.18-.13-1.51,1.61-.64-.34-.67"/>
              <path vector-effect="non-scaling-stroke" id="24019" d="m66.07,24.42l2.15-1.15,2.19,1.13.47,1.67-.84,1.47-.42.38-.37.21-.11.21-.55,3.57-.03,1.73-.56.51-.7-.47-.73-.83.62-.29.38-.37-.53-.81-.61-.04v.89s-.51.83-.51.83l.51.6.14,1.17-.7-.31h-.57s-.16-.75-.16-.75l-1.09.09-.13.53,1.04.45-.33.41-.88-.56-.3-.42-.46-.34-.62-.21-.08-.06-.25-.45.48-.56-.82-.12-.75-1.47-.99-1.12,1.2-.62.13-.59-1.05-.74.29-.86.1-.17.4-.34.16-.09,1.46-.41.7.5,2.03.17.66-2.36m.29,13.14l-.04-.03h-.02s-.15-.26-.15-.26l-.13-.45-.13-.96.25-.3.39-.09.59.48.03.14.1.34-.1.46-.22.47-.59.21"/>
          </g>
      </svg>
  </div>
  <div class="svg-cont">
    <svg vector-effect="non-scaling-stroke" id="maryland" width="400" height="204" viewBox="0 0 82.99 41.41" preserveAspectRatio="none">
        <g><path id="24001" d="m19.04,9.09l.65-.12.54,1.95-1.84,3.15-3.35.18-2.12-.84-2.88,3.97-1.9-.43,1.39-6.11,2.12-.39,7.39-1.36"/>
            <path id="24023" d="m9.53,10.84l-1.39,6.11-3.27,3.95-.92,1.71-1.42,1.54-.54.2L.1,12.56l1.46-.26,7.97-1.45"/>
            <path id="24037" d="m59.72,34.2l.84,2.2,1.43,1.4-.16.5.65,1.71-.8-.26-.84-.8-1.23-.51-.14.66-1.23-.61-1.22-1.14-1.59-.35-1.33.28-.25.22-.85-.39-.7-.95-.92-1.6v-.43s.96-2.93.96-2.93l.16-.14.62-.09.33-.03.71.1,2.48,1.81,1.21.26.56,1.26,1.3-.18"/>
            <path id="24017" d="m46.03,27.83l1.06,1.91.28-.6.05-.18.08-.1.23-.16.57-.27,1.83-.32,2.18.51.07.13.44,1.22.89.27h.27l.19.82-.71-.1-.33.03-.62.09-.16.14-.96,2.93v.43s.91,1.6.91,1.6l.09.59v.3l-.04.18-1.75-.8-.19-.37-.91-.54-1.13-2.05-.76.52-.47.66-.49.09-.27.47-.94.91-.19-.04-.67-.33-.39-.67-.48-1.49.05-.73.27-.99.72-1.3.78-.96-.87-.81.58-.03.23-.63.52-.31"/>
            <path id="24047" d="m77.7,27.15l5.1-1.11.09.84v.6s0,.82,0,.82l-.07.75-.47,5.27-.05.32-.06.22-.1.37-.06.27-.33.84-.69.24.87-1.67.14-.57.09-1.09.32-2.79-.22.98-.56.44-.12-.74-.56.41-.5,2.29-.16,1.04-.48.14.03.67-.32-.1.02,1.47-4.57,1.56-1.08-1.45,2.07-1.03-.56-2.06-1.64-1.95,4.3-1.21.54-1.19.09-.54-.39-1.08-.65-.94"/>
            <path id="24045" d="m70.87,26.07l.24.87.19.66.21.73.54-.09,1.23-.21h.06l1.57-.3.37-.07.9-.17h.07s.24-.06.24-.06l.28-.05.68-.15.26-.06.65.94.39,1.08-.09.54-.54,1.19-4.3,1.21-1.07-.46-.49.93h-1.24s-1.41,1.39-1.41,1.39l-1.05-.36.03-1.73.55-3.57.11-.21.37-.21.42-.38.84-1.47"/>
            <path id="24043" d="m23.9,8.17l10.87-2.06-.26,1.26-.26.71-.14.24-.63.41-.04.25-.14,1.67-.04,2.15-.33,3.14-.69.08-.68-.36.07-1.78-1.15-.15-.22-1.25-.5-.02-.51-.28-.78-1.21.77-.32-.08-.61-.63.09-.86.31-.67.03-.84.31-.49-.54-.3-.33-.8-.58-.64-.24-.65-.07-.6-.02-.11.04-.12.14-.46.72-.62,1.14-.21.03-.93-.18-.54-1.95,4.21-.8"/>
            <path id="24009" d="m59.72,34.2l-1.3.18-.56-1.26-1.21-.26-2.48-1.81-.19-.82-1.18-4.78.09-.19.48-.42.44-.05.21.94,1.68-.03v.3s.11.48.11.48l.91,3.11.08.23.28.52.34.45.8.58,1.49,1.2.06.12.08.48-.13,1.05"/>
            <path id="24041" d="m64.82,18.9l.17.55,1.1,1.6-1.31,1.68-.18.72.06.08.94.79.48.11-.66,2.36-2.03-.17-.7-.5.06-.1-.25-.45-.89-.18-.93-1.27-.3.03-.29.57-.68-.23-.06.04-.18.42v.23l.28.27.03.23-.27.25-.2-.3-.2-1.52.02-.5.34-1.33.04-.06.47-.55.48.48h.8s-.13-.85-.13-.85l1.4-1.04-.09-1.41,2.72.04"/>
            <path id="24011" d="m64.82,18.9l.95-4.59,1.45-1.27,3.19,11.36-4.33.02-.48-.11-.94-.79-.06-.08.18-.72,1.31-1.68-1.1-1.6-.17-.55"/>
            <path id="24029" d="m61.69,8.8l4.05-.97.51,1.8.32,1.13-2.3.39-1.46.41-.59.26-.68.87.48,1.11-1.68,1.9-.75.35.33,1.61-.68-.06-.2-1.57-1.04-1.07-.03-.47.06-.37.74-3.44.2-.34.84-1.13,1.86-.41"/>
            <path id="24510" d="m53.31,14.22l-.31.59-1.31-.7-1.83-.53-.44-2.09,3.1-.65.79,3.39"/>
            <path id="24033" d="m47.51,17.47l.96.48,3.02,2.2.66,1.47.65,3.83,1.18,4.78h-.27l-.89-.27-.44-1.22-.07-.13-2.18-.51-1.83.32-.57.27-.23.16-.08.1-.05.18-.28.6-1.06-1.91.43-2v-.1s1.82-2.88,1.82-2.88l-2-1.2,1.23-4.18"/>
            <path id="24003" d="m55.48,16.26l.38.7-.17.66.83.56.12.25-1.21,1.1.57.69-.44,1.42-.19.87.45.18-.91,1.87.16.51.12.2.52.42-1.68.03-.21-.94-.44.05-.48.42-.09.19-.65-3.83-.66-1.47-3.02-2.2,1.95-3.02,1.27-.82,1.31.71,1.66.61.82.83Z"/>
            <path id="24027" d="m46.59,12.48l3.82,2.44-1.95,3.02-.96-.48-.29.22-.76.04-.2-.06-3.69-2.51-.85-.87-.35-.46-.02-.05.03-.12.22-.24v-.02s4.98-.91,4.98-.91"/>
            <path id="24031" d="m41.61,13.41l-.22.24-.03.12.02.05.35.46.85.87,3.69,2.51.2.06.76-.04.29-.22-1.23,4.18-.91-.47-.98,1.6-.64-.49-.85.08-.24-.06h-.38s-.4-.31-.4-.31l-.02-.69-.65-.2-1.01-.42-.84.09-.86.04-.63-.04h-.03s-1.14-.77-1.14-.77l-.11-.08h-.01l-.1-.14-.12-.39v-.02s.02-.21.02-.21l.04-.29v-.1s.08-.19.08-.19l.56-.24.15-.88,4.42-4.04"/>
            <path id="24035" d="m64.82,18.9l-2.72-.04.09,1.41-1.4,1.04-.3-1.24-.21-.4-.52-.33-.29.57-.35-.12-.38.25.12.45-.75.11.26.98-.58.78v-.83s-.43-1.54-.43-1.54l.7-2.46.61,1.12,1.42-.21.49-.94-.36-.7.17-.5-.06-.61,1.68-1.9-.48-1.11.68-.87.59-.26,1.46-.41,2.3-.39.64,2.29-1.45,1.27-.95,4.59"/>
            <path id="24015" d="m57.71,1.38L63.68.1l.19.7.02.12.02.12.03.11.03.11.03.11.03.11.04.11.04.11,1.64,6.14-4.05.97-.08-.27h-.55s.03-.41.03-.41l.65-.96-.56-.21.34-1.9-.25-.55-1.67.71-3.57-3.46,1.68-.36"/>
            <path id="24025" d="m55.92,1.76l.11-.02,3.57,3.46-.44,1.24.96.43.19.44-1.72,2.02-.68.8-.63.91.03.47-.32-.1-.28-.8-.42-.3-.09-.21-1.58-1.87-1.05-.79-1.04-.31-.36.07-.47-.37-.72-1.08-.17-.4-.58-2.4,5.67-1.19"/>
            <path id="24005" d="m46.51,3.73l3.74-.78.58,2.4.17.4.72,1.08.47.37.36-.07,1.04.31,1.05.79,1.58,1.87.09.21h-.09l-.3.14.41,1.1-.83.29-.17,1,.3.15.1-.03-.02.17-.06.19-.48.8-.25.3-1.08-.1-.51-.1h-.03l-.79-3.39-3.1.65.44,2.1,1.83.53-1.27.82-3.82-2.44-.68-2.39.28-1.82.32-4.54"/>
            <path id="24013" d="m46.51,3.73l-.32,4.54-.28,1.82.68,2.39-4.97.91.36-2.64.06-.71-.02-.05-2.15-1.57-1.98-.43.52-.89.69-1.86,3.74-.76,3.66-.76"/>
            <path id="24021" d="m34.94,6.08l4.18-.83-.69,1.86-.52.89,1.98.43,2.15,1.57.02.05-.06.71-.36,2.64v.02s-4.44,4.04-4.44,4.04l-1.58-.53-.66-.83-.96.24-1.07-.37.33-3.14.04-2.15.14-1.67.04-.25.63-.41.14-.24.26-.71.26-1.26.17-.03"/>
            <path id="24039" d="m67.73,40.98l-.14-.52-.14-.71v-.25s.04-.17.04-.17l.33-.23.14-.05.16.04.59.25.12.1.04.21-.23.11-.04.7.07.33-.93.2Zm-1.37-3.42l.59-.21.22-.47.1-.46.25.58.25.76.13.41-.08.13-.19.08-.26-.08-.49-.35-.52-.4m3.24-3.57l1.41-1.38h1.24s.49-.95.49-.95l1.07.46,1.64,1.95.56,2.06-2.07,1.03,1.08,1.45-.59,1.15-2.11-.06-1.08,1.36-.65.21v-.87s-.4-.49-.4-.49l.43-.95-.12-.35.56-.34.32-.67-.73-.13-.21.55-.37-.64.68-1.17-1.04-.09-.82.86-.43-.18-.13-1.51,1.61-.64-.34-.67"/>
            <path id="24019" d="m66.07,24.42l2.15-1.15,2.19,1.13.47,1.67-.84,1.47-.42.38-.37.21-.11.21-.55,3.57-.03,1.73-.56.51-.7-.47-.73-.83.62-.29.38-.37-.53-.81-.61-.04v.89s-.51.83-.51.83l.51.6.14,1.17-.7-.31h-.57s-.16-.75-.16-.75l-1.09.09-.13.53,1.04.45-.33.41-.88-.56-.3-.42-.46-.34-.62-.21-.08-.06-.25-.45.48-.56-.82-.12-.75-1.47-.99-1.12,1.2-.62.13-.59-1.05-.74.29-.86.1-.17.4-.34.16-.09,1.46-.41.7.5,2.03.17.66-2.36m.29,13.14l-.04-.03h-.02s-.15-.26-.15-.26l-.13-.45-.13-.96.25-.3.39-.09.59.48.03.14.1.34-.1.46-.22.47-.59.21"/>
        </g>
    </svg>
  </div>
</div>

css svg vector-graphics
2个回答
0
投票

只需将其添加到您的 CSS

vector-effect: non-scaling-stroke

正如 MDN 所说:

作为表示属性,矢量效果可以用作 CSS 属性。

.container {
  display:flex;
}

.svg-cont {
  flex:1;
}

.svg-cont path {
  fill:red;
  stroke:blue;
  stroke-width:0.05em;
  vector-effect: non-scaling-stroke
}
<div class="container">
  <div class="svg-cont">
      <svg id="maryland" width="400" height="204" viewBox="0 0 82.99 41.41" preserveAspectRatio="none">
          <g><path vector-effect="non-scaling-stroke" id="24001" d="m19.04,9.09l.65-.12.54,1.95-1.84,3.15-3.35.18-2.12-.84-2.88,3.97-1.9-.43,1.39-6.11,2.12-.39,7.39-1.36"/>
              <path vector-effect="non-scaling-stroke" id="24023" d="m9.53,10.84l-1.39,6.11-3.27,3.95-.92,1.71-1.42,1.54-.54.2L.1,12.56l1.46-.26,7.97-1.45"/>
              <path vector-effect="non-scaling-stroke" id="24037" d="m59.72,34.2l.84,2.2,1.43,1.4-.16.5.65,1.71-.8-.26-.84-.8-1.23-.51-.14.66-1.23-.61-1.22-1.14-1.59-.35-1.33.28-.25.22-.85-.39-.7-.95-.92-1.6v-.43s.96-2.93.96-2.93l.16-.14.62-.09.33-.03.71.1,2.48,1.81,1.21.26.56,1.26,1.3-.18"/>
              <path vector-effect="non-scaling-stroke" id="24017" d="m46.03,27.83l1.06,1.91.28-.6.05-.18.08-.1.23-.16.57-.27,1.83-.32,2.18.51.07.13.44,1.22.89.27h.27l.19.82-.71-.1-.33.03-.62.09-.16.14-.96,2.93v.43s.91,1.6.91,1.6l.09.59v.3l-.04.18-1.75-.8-.19-.37-.91-.54-1.13-2.05-.76.52-.47.66-.49.09-.27.47-.94.91-.19-.04-.67-.33-.39-.67-.48-1.49.05-.73.27-.99.72-1.3.78-.96-.87-.81.58-.03.23-.63.52-.31"/>
              <path vector-effect="non-scaling-stroke" id="24047" d="m77.7,27.15l5.1-1.11.09.84v.6s0,.82,0,.82l-.07.75-.47,5.27-.05.32-.06.22-.1.37-.06.27-.33.84-.69.24.87-1.67.14-.57.09-1.09.32-2.79-.22.98-.56.44-.12-.74-.56.41-.5,2.29-.16,1.04-.48.14.03.67-.32-.1.02,1.47-4.57,1.56-1.08-1.45,2.07-1.03-.56-2.06-1.64-1.95,4.3-1.21.54-1.19.09-.54-.39-1.08-.65-.94"/>
              <path vector-effect="non-scaling-stroke" id="24045" d="m70.87,26.07l.24.87.19.66.21.73.54-.09,1.23-.21h.06l1.57-.3.37-.07.9-.17h.07s.24-.06.24-.06l.28-.05.68-.15.26-.06.65.94.39,1.08-.09.54-.54,1.19-4.3,1.21-1.07-.46-.49.93h-1.24s-1.41,1.39-1.41,1.39l-1.05-.36.03-1.73.55-3.57.11-.21.37-.21.42-.38.84-1.47"/>
              <path vector-effect="non-scaling-stroke" id="24043" d="m23.9,8.17l10.87-2.06-.26,1.26-.26.71-.14.24-.63.41-.04.25-.14,1.67-.04,2.15-.33,3.14-.69.08-.68-.36.07-1.78-1.15-.15-.22-1.25-.5-.02-.51-.28-.78-1.21.77-.32-.08-.61-.63.09-.86.31-.67.03-.84.31-.49-.54-.3-.33-.8-.58-.64-.24-.65-.07-.6-.02-.11.04-.12.14-.46.72-.62,1.14-.21.03-.93-.18-.54-1.95,4.21-.8"/>
              <path vector-effect="non-scaling-stroke" id="24009" d="m59.72,34.2l-1.3.18-.56-1.26-1.21-.26-2.48-1.81-.19-.82-1.18-4.78.09-.19.48-.42.44-.05.21.94,1.68-.03v.3s.11.48.11.48l.91,3.11.08.23.28.52.34.45.8.58,1.49,1.2.06.12.08.48-.13,1.05"/>
              <path vector-effect="non-scaling-stroke" id="24041" d="m64.82,18.9l.17.55,1.1,1.6-1.31,1.68-.18.72.06.08.94.79.48.11-.66,2.36-2.03-.17-.7-.5.06-.1-.25-.45-.89-.18-.93-1.27-.3.03-.29.57-.68-.23-.06.04-.18.42v.23l.28.27.03.23-.27.25-.2-.3-.2-1.52.02-.5.34-1.33.04-.06.47-.55.48.48h.8s-.13-.85-.13-.85l1.4-1.04-.09-1.41,2.72.04"/>
              <path vector-effect="non-scaling-stroke" id="24011" d="m64.82,18.9l.95-4.59,1.45-1.27,3.19,11.36-4.33.02-.48-.11-.94-.79-.06-.08.18-.72,1.31-1.68-1.1-1.6-.17-.55"/>
              <path vector-effect="non-scaling-stroke" id="24029" d="m61.69,8.8l4.05-.97.51,1.8.32,1.13-2.3.39-1.46.41-.59.26-.68.87.48,1.11-1.68,1.9-.75.35.33,1.61-.68-.06-.2-1.57-1.04-1.07-.03-.47.06-.37.74-3.44.2-.34.84-1.13,1.86-.41"/>
              <path vector-effect="non-scaling-stroke" id="24510" d="m53.31,14.22l-.31.59-1.31-.7-1.83-.53-.44-2.09,3.1-.65.79,3.39"/>
              <path vector-effect="non-scaling-stroke" id="24033" d="m47.51,17.47l.96.48,3.02,2.2.66,1.47.65,3.83,1.18,4.78h-.27l-.89-.27-.44-1.22-.07-.13-2.18-.51-1.83.32-.57.27-.23.16-.08.1-.05.18-.28.6-1.06-1.91.43-2v-.1s1.82-2.88,1.82-2.88l-2-1.2,1.23-4.18"/>
              <path vector-effect="non-scaling-stroke" id="24003" d="m55.48,16.26l.38.7-.17.66.83.56.12.25-1.21,1.1.57.69-.44,1.42-.19.87.45.18-.91,1.87.16.51.12.2.52.42-1.68.03-.21-.94-.44.05-.48.42-.09.19-.65-3.83-.66-1.47-3.02-2.2,1.95-3.02,1.27-.82,1.31.71,1.66.61.82.83Z"/>
              <path vector-effect="non-scaling-stroke" id="24027" d="m46.59,12.48l3.82,2.44-1.95,3.02-.96-.48-.29.22-.76.04-.2-.06-3.69-2.51-.85-.87-.35-.46-.02-.05.03-.12.22-.24v-.02s4.98-.91,4.98-.91"/>
              <path vector-effect="non-scaling-stroke" id="24031" d="m41.61,13.41l-.22.24-.03.12.02.05.35.46.85.87,3.69,2.51.2.06.76-.04.29-.22-1.23,4.18-.91-.47-.98,1.6-.64-.49-.85.08-.24-.06h-.38s-.4-.31-.4-.31l-.02-.69-.65-.2-1.01-.42-.84.09-.86.04-.63-.04h-.03s-1.14-.77-1.14-.77l-.11-.08h-.01l-.1-.14-.12-.39v-.02s.02-.21.02-.21l.04-.29v-.1s.08-.19.08-.19l.56-.24.15-.88,4.42-4.04"/>
              <path vector-effect="non-scaling-stroke" id="24035" d="m64.82,18.9l-2.72-.04.09,1.41-1.4,1.04-.3-1.24-.21-.4-.52-.33-.29.57-.35-.12-.38.25.12.45-.75.11.26.98-.58.78v-.83s-.43-1.54-.43-1.54l.7-2.46.61,1.12,1.42-.21.49-.94-.36-.7.17-.5-.06-.61,1.68-1.9-.48-1.11.68-.87.59-.26,1.46-.41,2.3-.39.64,2.29-1.45,1.27-.95,4.59"/>
              <path vector-effect="non-scaling-stroke" id="24015" d="m57.71,1.38L63.68.1l.19.7.02.12.02.12.03.11.03.11.03.11.03.11.04.11.04.11,1.64,6.14-4.05.97-.08-.27h-.55s.03-.41.03-.41l.65-.96-.56-.21.34-1.9-.25-.55-1.67.71-3.57-3.46,1.68-.36"/>
              <path vector-effect="non-scaling-stroke" id="24025" d="m55.92,1.76l.11-.02,3.57,3.46-.44,1.24.96.43.19.44-1.72,2.02-.68.8-.63.91.03.47-.32-.1-.28-.8-.42-.3-.09-.21-1.58-1.87-1.05-.79-1.04-.31-.36.07-.47-.37-.72-1.08-.17-.4-.58-2.4,5.67-1.19"/>
              <path vector-effect="non-scaling-stroke" id="24005" d="m46.51,3.73l3.74-.78.58,2.4.17.4.72,1.08.47.37.36-.07,1.04.31,1.05.79,1.58,1.87.09.21h-.09l-.3.14.41,1.1-.83.29-.17,1,.3.15.1-.03-.02.17-.06.19-.48.8-.25.3-1.08-.1-.51-.1h-.03l-.79-3.39-3.1.65.44,2.1,1.83.53-1.27.82-3.82-2.44-.68-2.39.28-1.82.32-4.54"/>
              <path vector-effect="non-scaling-stroke" id="24013" d="m46.51,3.73l-.32,4.54-.28,1.82.68,2.39-4.97.91.36-2.64.06-.71-.02-.05-2.15-1.57-1.98-.43.52-.89.69-1.86,3.74-.76,3.66-.76"/>
              <path vector-effect="non-scaling-stroke" id="24021" d="m34.94,6.08l4.18-.83-.69,1.86-.52.89,1.98.43,2.15,1.57.02.05-.06.71-.36,2.64v.02s-4.44,4.04-4.44,4.04l-1.58-.53-.66-.83-.96.24-1.07-.37.33-3.14.04-2.15.14-1.67.04-.25.63-.41.14-.24.26-.71.26-1.26.17-.03"/>
              <path vector-effect="non-scaling-stroke" id="24039" d="m67.73,40.98l-.14-.52-.14-.71v-.25s.04-.17.04-.17l.33-.23.14-.05.16.04.59.25.12.1.04.21-.23.11-.04.7.07.33-.93.2Zm-1.37-3.42l.59-.21.22-.47.1-.46.25.58.25.76.13.41-.08.13-.19.08-.26-.08-.49-.35-.52-.4m3.24-3.57l1.41-1.38h1.24s.49-.95.49-.95l1.07.46,1.64,1.95.56,2.06-2.07,1.03,1.08,1.45-.59,1.15-2.11-.06-1.08,1.36-.65.21v-.87s-.4-.49-.4-.49l.43-.95-.12-.35.56-.34.32-.67-.73-.13-.21.55-.37-.64.68-1.17-1.04-.09-.82.86-.43-.18-.13-1.51,1.61-.64-.34-.67"/>
              <path vector-effect="non-scaling-stroke" id="24019" d="m66.07,24.42l2.15-1.15,2.19,1.13.47,1.67-.84,1.47-.42.38-.37.21-.11.21-.55,3.57-.03,1.73-.56.51-.7-.47-.73-.83.62-.29.38-.37-.53-.81-.61-.04v.89s-.51.83-.51.83l.51.6.14,1.17-.7-.31h-.57s-.16-.75-.16-.75l-1.09.09-.13.53,1.04.45-.33.41-.88-.56-.3-.42-.46-.34-.62-.21-.08-.06-.25-.45.48-.56-.82-.12-.75-1.47-.99-1.12,1.2-.62.13-.59-1.05-.74.29-.86.1-.17.4-.34.16-.09,1.46-.41.7.5,2.03.17.66-2.36m.29,13.14l-.04-.03h-.02s-.15-.26-.15-.26l-.13-.45-.13-.96.25-.3.39-.09.59.48.03.14.1.34-.1.46-.22.47-.59.21"/>
          </g>
      </svg>
  </div>
  <div class="svg-cont">
    <svg vector-effect="non-scaling-stroke" id="maryland" width="400" height="204" viewBox="0 0 82.99 41.41" preserveAspectRatio="none">
        <g><path id="24001" d="m19.04,9.09l.65-.12.54,1.95-1.84,3.15-3.35.18-2.12-.84-2.88,3.97-1.9-.43,1.39-6.11,2.12-.39,7.39-1.36"/>
            <path id="24023" d="m9.53,10.84l-1.39,6.11-3.27,3.95-.92,1.71-1.42,1.54-.54.2L.1,12.56l1.46-.26,7.97-1.45"/>
            <path id="24037" d="m59.72,34.2l.84,2.2,1.43,1.4-.16.5.65,1.71-.8-.26-.84-.8-1.23-.51-.14.66-1.23-.61-1.22-1.14-1.59-.35-1.33.28-.25.22-.85-.39-.7-.95-.92-1.6v-.43s.96-2.93.96-2.93l.16-.14.62-.09.33-.03.71.1,2.48,1.81,1.21.26.56,1.26,1.3-.18"/>
            <path id="24017" d="m46.03,27.83l1.06,1.91.28-.6.05-.18.08-.1.23-.16.57-.27,1.83-.32,2.18.51.07.13.44,1.22.89.27h.27l.19.82-.71-.1-.33.03-.62.09-.16.14-.96,2.93v.43s.91,1.6.91,1.6l.09.59v.3l-.04.18-1.75-.8-.19-.37-.91-.54-1.13-2.05-.76.52-.47.66-.49.09-.27.47-.94.91-.19-.04-.67-.33-.39-.67-.48-1.49.05-.73.27-.99.72-1.3.78-.96-.87-.81.58-.03.23-.63.52-.31"/>
            <path id="24047" d="m77.7,27.15l5.1-1.11.09.84v.6s0,.82,0,.82l-.07.75-.47,5.27-.05.32-.06.22-.1.37-.06.27-.33.84-.69.24.87-1.67.14-.57.09-1.09.32-2.79-.22.98-.56.44-.12-.74-.56.41-.5,2.29-.16,1.04-.48.14.03.67-.32-.1.02,1.47-4.57,1.56-1.08-1.45,2.07-1.03-.56-2.06-1.64-1.95,4.3-1.21.54-1.19.09-.54-.39-1.08-.65-.94"/>
            <path id="24045" d="m70.87,26.07l.24.87.19.66.21.73.54-.09,1.23-.21h.06l1.57-.3.37-.07.9-.17h.07s.24-.06.24-.06l.28-.05.68-.15.26-.06.65.94.39,1.08-.09.54-.54,1.19-4.3,1.21-1.07-.46-.49.93h-1.24s-1.41,1.39-1.41,1.39l-1.05-.36.03-1.73.55-3.57.11-.21.37-.21.42-.38.84-1.47"/>
            <path id="24043" d="m23.9,8.17l10.87-2.06-.26,1.26-.26.71-.14.24-.63.41-.04.25-.14,1.67-.04,2.15-.33,3.14-.69.08-.68-.36.07-1.78-1.15-.15-.22-1.25-.5-.02-.51-.28-.78-1.21.77-.32-.08-.61-.63.09-.86.31-.67.03-.84.31-.49-.54-.3-.33-.8-.58-.64-.24-.65-.07-.6-.02-.11.04-.12.14-.46.72-.62,1.14-.21.03-.93-.18-.54-1.95,4.21-.8"/>
            <path id="24009" d="m59.72,34.2l-1.3.18-.56-1.26-1.21-.26-2.48-1.81-.19-.82-1.18-4.78.09-.19.48-.42.44-.05.21.94,1.68-.03v.3s.11.48.11.48l.91,3.11.08.23.28.52.34.45.8.58,1.49,1.2.06.12.08.48-.13,1.05"/>
            <path id="24041" d="m64.82,18.9l.17.55,1.1,1.6-1.31,1.68-.18.72.06.08.94.79.48.11-.66,2.36-2.03-.17-.7-.5.06-.1-.25-.45-.89-.18-.93-1.27-.3.03-.29.57-.68-.23-.06.04-.18.42v.23l.28.27.03.23-.27.25-.2-.3-.2-1.52.02-.5.34-1.33.04-.06.47-.55.48.48h.8s-.13-.85-.13-.85l1.4-1.04-.09-1.41,2.72.04"/>
            <path id="24011" d="m64.82,18.9l.95-4.59,1.45-1.27,3.19,11.36-4.33.02-.48-.11-.94-.79-.06-.08.18-.72,1.31-1.68-1.1-1.6-.17-.55"/>
            <path id="24029" d="m61.69,8.8l4.05-.97.51,1.8.32,1.13-2.3.39-1.46.41-.59.26-.68.87.48,1.11-1.68,1.9-.75.35.33,1.61-.68-.06-.2-1.57-1.04-1.07-.03-.47.06-.37.74-3.44.2-.34.84-1.13,1.86-.41"/>
            <path id="24510" d="m53.31,14.22l-.31.59-1.31-.7-1.83-.53-.44-2.09,3.1-.65.79,3.39"/>
            <path id="24033" d="m47.51,17.47l.96.48,3.02,2.2.66,1.47.65,3.83,1.18,4.78h-.27l-.89-.27-.44-1.22-.07-.13-2.18-.51-1.83.32-.57.27-.23.16-.08.1-.05.18-.28.6-1.06-1.91.43-2v-.1s1.82-2.88,1.82-2.88l-2-1.2,1.23-4.18"/>
            <path id="24003" d="m55.48,16.26l.38.7-.17.66.83.56.12.25-1.21,1.1.57.69-.44,1.42-.19.87.45.18-.91,1.87.16.51.12.2.52.42-1.68.03-.21-.94-.44.05-.48.42-.09.19-.65-3.83-.66-1.47-3.02-2.2,1.95-3.02,1.27-.82,1.31.71,1.66.61.82.83Z"/>
            <path id="24027" d="m46.59,12.48l3.82,2.44-1.95,3.02-.96-.48-.29.22-.76.04-.2-.06-3.69-2.51-.85-.87-.35-.46-.02-.05.03-.12.22-.24v-.02s4.98-.91,4.98-.91"/>
            <path id="24031" d="m41.61,13.41l-.22.24-.03.12.02.05.35.46.85.87,3.69,2.51.2.06.76-.04.29-.22-1.23,4.18-.91-.47-.98,1.6-.64-.49-.85.08-.24-.06h-.38s-.4-.31-.4-.31l-.02-.69-.65-.2-1.01-.42-.84.09-.86.04-.63-.04h-.03s-1.14-.77-1.14-.77l-.11-.08h-.01l-.1-.14-.12-.39v-.02s.02-.21.02-.21l.04-.29v-.1s.08-.19.08-.19l.56-.24.15-.88,4.42-4.04"/>
            <path id="24035" d="m64.82,18.9l-2.72-.04.09,1.41-1.4,1.04-.3-1.24-.21-.4-.52-.33-.29.57-.35-.12-.38.25.12.45-.75.11.26.98-.58.78v-.83s-.43-1.54-.43-1.54l.7-2.46.61,1.12,1.42-.21.49-.94-.36-.7.17-.5-.06-.61,1.68-1.9-.48-1.11.68-.87.59-.26,1.46-.41,2.3-.39.64,2.29-1.45,1.27-.95,4.59"/>
            <path id="24015" d="m57.71,1.38L63.68.1l.19.7.02.12.02.12.03.11.03.11.03.11.03.11.04.11.04.11,1.64,6.14-4.05.97-.08-.27h-.55s.03-.41.03-.41l.65-.96-.56-.21.34-1.9-.25-.55-1.67.71-3.57-3.46,1.68-.36"/>
            <path id="24025" d="m55.92,1.76l.11-.02,3.57,3.46-.44,1.24.96.43.19.44-1.72,2.02-.68.8-.63.91.03.47-.32-.1-.28-.8-.42-.3-.09-.21-1.58-1.87-1.05-.79-1.04-.31-.36.07-.47-.37-.72-1.08-.17-.4-.58-2.4,5.67-1.19"/>
            <path id="24005" d="m46.51,3.73l3.74-.78.58,2.4.17.4.72,1.08.47.37.36-.07,1.04.31,1.05.79,1.58,1.87.09.21h-.09l-.3.14.41,1.1-.83.29-.17,1,.3.15.1-.03-.02.17-.06.19-.48.8-.25.3-1.08-.1-.51-.1h-.03l-.79-3.39-3.1.65.44,2.1,1.83.53-1.27.82-3.82-2.44-.68-2.39.28-1.82.32-4.54"/>
            <path id="24013" d="m46.51,3.73l-.32,4.54-.28,1.82.68,2.39-4.97.91.36-2.64.06-.71-.02-.05-2.15-1.57-1.98-.43.52-.89.69-1.86,3.74-.76,3.66-.76"/>
            <path id="24021" d="m34.94,6.08l4.18-.83-.69,1.86-.52.89,1.98.43,2.15,1.57.02.05-.06.71-.36,2.64v.02s-4.44,4.04-4.44,4.04l-1.58-.53-.66-.83-.96.24-1.07-.37.33-3.14.04-2.15.14-1.67.04-.25.63-.41.14-.24.26-.71.26-1.26.17-.03"/>
            <path id="24039" d="m67.73,40.98l-.14-.52-.14-.71v-.25s.04-.17.04-.17l.33-.23.14-.05.16.04.59.25.12.1.04.21-.23.11-.04.7.07.33-.93.2Zm-1.37-3.42l.59-.21.22-.47.1-.46.25.58.25.76.13.41-.08.13-.19.08-.26-.08-.49-.35-.52-.4m3.24-3.57l1.41-1.38h1.24s.49-.95.49-.95l1.07.46,1.64,1.95.56,2.06-2.07,1.03,1.08,1.45-.59,1.15-2.11-.06-1.08,1.36-.65.21v-.87s-.4-.49-.4-.49l.43-.95-.12-.35.56-.34.32-.67-.73-.13-.21.55-.37-.64.68-1.17-1.04-.09-.82.86-.43-.18-.13-1.51,1.61-.64-.34-.67"/>
            <path id="24019" d="m66.07,24.42l2.15-1.15,2.19,1.13.47,1.67-.84,1.47-.42.38-.37.21-.11.21-.55,3.57-.03,1.73-.56.51-.7-.47-.73-.83.62-.29.38-.37-.53-.81-.61-.04v.89s-.51.83-.51.83l.51.6.14,1.17-.7-.31h-.57s-.16-.75-.16-.75l-1.09.09-.13.53,1.04.45-.33.41-.88-.56-.3-.42-.46-.34-.62-.21-.08-.06-.25-.45.48-.56-.82-.12-.75-1.47-.99-1.12,1.2-.62.13-.59-1.05-.74.29-.86.1-.17.4-.34.16-.09,1.46-.41.7.5,2.03.17.66-2.36m.29,13.14l-.04-.03h-.02s-.15-.26-.15-.26l-.13-.45-.13-.96.25-.3.39-.09.59.48.03.14.1.34-.1.46-.22.47-.59.21"/>
        </g>
    </svg>
  </div>
</div>


0
投票

虽然我似乎找不到直接的替代方案,但您可以使用 Javascript

.setAttribute
方法分配属性,效果很好。

Jquery:

  let numberOfPaths = 24;
  function addToPaths() {
    for (let i = 0; i < numberOfPaths; i++) {
      $("path")[i].setAttribute("vector-effect", "non-scaling-stroke")
      console.log($("path")[i])
    }
  }

  addToPaths()

原版 JS:

  let numberOfPaths = 24;
  function addToPaths() {
    for (let i = 0; i < numberOfPaths; i++) {
      document.querySelector("path")[i].setAttribute("vector-effect", "non-scaling-stroke")
      console.log($("path")[i])
    }
  }

  addToPaths()
© www.soinside.com 2019 - 2024. All rights reserved.