I create my solution: https://dihar.github.io/components/style-updater/
четверг, 30 июня 2016 г., 13:44:52 UTC+3 пользователь Дмитрий Харин написал: > > Briefly: > > The situation is I would like use svg icons, but google's components > iron-icons with iron-iconset-svg don't should me control svg in css. Is > there better solution? > > More: > > I have many svgs, like: > > <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"; > xmlns:xlink="http://www.w3.org/1999/xlink"; x="0px" y="0px" > viewBox="0 0 19.8 19.8" style="enable-background:new 0 0 19.8 19.8;" > xml:space="preserve"> > <style type="text/css"> > .st0{fill:#201600;} > .st1{fill:none;stroke:#201600;stroke-width:1.1;stroke-miterlimit:10;} > </style> > <g> > <rect x="3.4" y="7.5" class="st0" width="4.4" height="4.1"/> > <rect x="3.4" y="3" class="st0" width="13.1" height="2.6"/> > <line class="st1" x1="9.2" y1="8.1" x2="16.5" y2="8.1"/> > <line class="st1" x1="9.2" y1="8.1" x2="13.7" y2="8.1"/> > <line class="st1" x1="9.2" y1="11" x2="12.4" y2="11"/> > <line class="st1" x1="3.4" y1="13.9" x2="14.1" y2="13.9"/> > <line class="st1" x1="3.4" y1="16.8" x2="13.1" y2="16.8"/> > </g> > </svg> > > How you can see, svg colored stroke and fill with classes (.st0, .st1 > ...there is another). > This svg locates in icon-svgset, for example: > > <link rel="import" href="/components/iron-icon/iron-icon.html"> > <link rel="import" > href="/components/iron-iconset-svg/iron-iconset-svg.html"> > > <iron-iconset-svg name="lms-comment" size="28.4"> > <svg> > <defs> > <g id="check"> > <path fill="none" stroke="#A9D3B0" stroke-width="1.1" > stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" > d="M20.4 10l-6 7.4-3.4-3.3"/> > <path d="M20.4 13.5v.6c0 3.5-2.8 6.3-6.3 6.3s-6.3-2.8-6.3-6.3 > 2.8-6.3 6.3-6.3c1.5 0 2.8.5 3.9 1.3" fill="none" stroke="#A9D3B0" > stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round" > stroke-miterlimit="10"/> > </g> > <g id="comment"> > <g fill="none" stroke="#000" stroke-width="1.1" > stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"> > <path d="M11.8 > 19.5c-.4-.6-.7-.9-1-1.9-.4-1.6-1.3-2.2-1.4-4-.2-2.4 1.4-4.6 3.8-5.1 3-.5 > 5.6 1.7 5.6 4.6 0 2-.9 2.7-1.4 4.4-.3 1.1-.6 1.4-1 > 2h-4.6zm.2-6c-.1-1.1.6-2.1 1.7-2.3"/> > <path d="M11.8 19.4s.3 2.1.5 2.6c.1.2.3.4.6.4h2.6c.3 0 > .5-.2.6-.4.2-.5.5-2.6.5-2.6"/> > <path d="M14.2 24h.6c.3 0 .5-.1.6-.4.1-.3.5-1.4.5-1.4M14.1 > 24h-.6c-.3 0-.5-.1-.6-.4-.1-.3-.5-1.4-.5-1.4m1.8-15.9V4.4m3.6 > 2.7l.8-1.5m1.7 4.1l1.6-.9m-.6 4.5H23M10.6 7.1l-.9-1.5M8 9.7l-1.5-.9m.6 > 4.5H5.3"/> > </g> > </g> > </defs> > </svg> > </iron-iconset-svg> > > And added on page > > <div class="know-article_comm"> > <iron-icon class="know-article_bottom_icon" > icon="lms-comment:comment"></iron-icon> > <span class="know-article_comm_text">15</span> > </div> > > That did not work css style if I want change color when div.know-article_comm > hovered, like > > .know-article_comm:hover svg{ > fill: #newColor; > stroke: #newColor; > } > > Ok, maybe refactor svg, and delete integrated styles, and add classes for > elements that should be colored (filled ar stroked), example: > > <link rel="import" href="/components/iron-icon/iron-icon.html"> > <link rel="import" > href="/components/iron-iconset-svg/iron-iconset-svg.html"> > > <iron-iconset-svg name="lms-knowledge-base" size="20"> > <svg> > <defs> > <g id="addmaterial"> > <style type="text/css"> > > .st0{fill:none;stroke-width:1.1;stroke-linejoin:round;stroke-miterlimit:10;} > </style> > <g> > <g> > <line class="st0 stroke-colored" x1="13.2" y1="9.9" x2="6.6" y2="9.9"/> > <line class="st0 stroke-colored" x1="9.9" y1="13.2" x2="9.9" y2="6.6"/> > </g> > <circle class="st0 stroke-colored" cx="9.9" cy="9.9" r="6.4"/> > </g> > </g> > <g id="all"> > <style type="text/css"> > .st0{} > > .st1{fill:none;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} > </style> > <g> > <circle class="st0 fill-colored" cx="4.4" cy="5.6" r="1"/> > <circle class="st0 fill-colored" cx="4.4" cy="9.9" r="1"/> > <circle class="st0 fill-colored" cx="4.4" cy="14.2" r="1"/> > <line class="st1 stroke-colored" x1="16.5" y1="5.6" x2="7.2" y2="5.6"/> > <line class="st1 stroke-colored" x1="16.5" y1="9.9" x2="7.2" y2="9.9"/> > <line class="st1 stroke-colored" x1="16.5" y1="14.3" x2="7.2" y2="14.3"/> > </g> > </g> > <g id="article"> > <style type="text/css"> > .st0{} > .st1{fill:none;stroke-width:1.1;stroke-miterlimit:10;} > </style> > <g> > <rect x="3.4" y="7.5" class="st0 fill-colored" width="4.4" height="4.1"/> > <rect x="3.4" y="3" class="st0 fill-colored" width="13.1" height="2.6"/> > <line class="st1 stroke-colored" x1="9.2" y1="8.1" x2="16.5" y2="8.1"/> > <line class="st1 stroke-colored" x1="9.2" y1="8.1" x2="13.7" y2="8.1"/> > <line class="st1 stroke-colored" x1="9.2" y1="11" x2="12.4" y2="11"/> > <line class="st1 stroke-colored" x1="3.4" y1="13.9" x2="14.1" y2="13.9"/> > <line class="st1 stroke-colored" x1="3.4" y1="16.8" x2="13.1" y2="16.8"/> > </g> > </g> > <g id="booksummary"> > <style type="text/css"> > .st0{fill:none;stroke-miterlimit:10;} > </style> > <g> > <polyline class="st0 stroke-colored" points="10.2,17.3 16.7,14.8 16.7,2.1 > 13.4,3.3 10.2,4.6 "/> > <polyline class="st0 stroke-colored" points="9.7,17.3 3.2,14.8 3.2,2.1 > 6.4,3.3 9.7,4.6 "/> > <line class="st0 stroke-colored" x1="10" y1="4.1" x2="10" y2="17.7"/> > <polyline class="st0 stroke-colored" points="15,5.6 13.4,6.2 11.8,6.8 "/> > <polyline class="st0 stroke-colored" points="15,8.1 13.4,8.7 11.8,9.3 "/> > <polyline class="st0 stroke-colored" points="4.8,5.6 6.4,6.2 8,6.8 "/> > <polyline class="st0 stroke-colored" points="4.8,8.1 6.4,8.7 8,9.3 "/> > </g> > </g> > <g id="conference"> > <style type="text/css"> > .st0{} > .st1{fill:none;stroke-width:1.1;stroke-linecap:round;stroke-miterlimit:10;} > </style> > <g> > <rect x="2.9" y="1.8" class="st0 fill-colored" width="14.1" height="1.2"/> > <line class="st1 stroke-colored" x1="9.9" y1="13.6" x2="9.9" y2="18"/> > <g> > <line class="st1 stroke-colored" x1="7.8" y1="13.6" x2="4.3" y2="17.3"/> > <line class="st1 stroke-colored" x1="12" y1="13.6" x2="15.6" y2="17.3"/> > </g> > <g> > <path class="st0 fill-colored" d="M15.4,5.4v5.8h-11V5.4H15.4 > M16.4,4.4h-13v7.8h13V4.4L16.4,4.4z"/> > </g> > </g> > </g> > > </defs> > </svg> > </iron-iconset-svg> > > > Ok, now I can type like this: > > .know-article_comm svg .fill-colored{ > fill: #oldColor; > } > .know-article_comm svg .stroke-colored{ > fill: #oldColor; > } > .know-article_comm:hover svg .fill-colored{ > fill: #newColor; > } > .know-article_comm:hover svg .stroke-colored{ > fill: #newColor; > } > > > And this work! > > But! It work only shady dom! > > I can't styled svg in shadow dom. Please, help. > > It's first thinks I thought about: > 1) Use no-component method > 2) Create my own component (with blackjack, and ...), but I will collide > with how to transmit :hover to attribute new component without complication > outer js logik (ex. main.js); > > Maybe anybody met with this situation, help!) > > P.S. If you don't understand somethink, sorry. I have some problems with > language. > > > Follow Polymer on Google+: plus.google.com/107187849809354688692 --- You received this message because you are subscribed to the Google Groups "Polymer" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/02250185-f89c-4373-bda4-bdf4d40e2b7e%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
